Change breakpoint-max implementation

- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.

8 files changed, 29 insertions, 21 deletions

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 49f27d304a..44519724e5 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -203,8 +203,8 @@
 }
 
 @each $breakpoint in map-keys($grid-breakpoints) {
-  $next-breakpoint: breakpoint-next($breakpoint);
-  $postfix: if(breakpoint-max($breakpoint, $grid-breakpoints) == null, "", "-#{$next-breakpoint}-down");
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  $postfix: if($infix != "", $infix + "-down", "");
 
   @include media-breakpoint-down($breakpoint) {
     .modal-fullscreen#{$postfix} {
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 1250a36c18..5ae45ffe8e 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -140,8 +140,7 @@
 // size of where your table will overflow.
 
 @each $breakpoint in map-keys($grid-breakpoints) {
-  $next: breakpoint-next($breakpoint, $grid-breakpoints);
-  $infix: breakpoint-infix($next, $grid-breakpoints);
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
   @include media-breakpoint-down($breakpoint) {
     .table-responsive#{$infix} {
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 81f8ffb281..66a0050c1b 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -31,18 +31,18 @@
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
 // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - .02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -108,7 +108,7 @@
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
+  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 4e744895fd..f238fdf727 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -29,7 +29,7 @@
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       display: block;
       overflow-x: auto;
 
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 54d0c425c7..1ba779f937 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -2,7 +2,7 @@
   padding: .625rem 0;
   background-color: $bd-purple-bright;
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     .navbar-nav-scroll {
       width: 100%;
 
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index e3ce8ba14c..89c14b3821 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -26,7 +26,7 @@
 }
 
 .bd-search {
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     width: 100%;
   }
 
diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md
index 3fa3513ef5..3d61ad67cd 100644
--- a/site/content/docs/5.0/layout/breakpoints.md
+++ b/site/content/docs/5.0/layout/breakpoints.md
@@ -127,12 +127,12 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
 
 {{< highlight scss >}}
-@include media-breakpoint-down(xs) { ... }
+// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
 @include media-breakpoint-down(sm) { ... }
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
 @include media-breakpoint-down(xl) { ... }
-// No media query necessary for xxl breakpoint as it has no upper bound on its width
+@include media-breakpoint-down(xxl) { ... }
 
 // Example: Style from medium breakpoint and down
 @include media-breakpoint-down(md) {
@@ -181,18 +181,25 @@ There are also media queries and mixins for targeting a single segment of screen
 @include media-breakpoint-only(xxl) { ... }
 {{< /highlight >}}
 
-Similarly, media queries may span multiple breakpoint widths:
+For example the `@include media-breakpoint-only(md) { ... }` will result in :
 
 {{< highlight scss >}}
-// Example
-// Apply styles starting from medium devices and up to extra large devices
-@media (min-width: 768px) and (max-width: 1199.98px) { ... }
+@media (min-width: 768px) and (max-width: 991.98px) { ... }
 {{< /highlight >}}
 
 ### Between breakpoints
 
-The Sass mixin for targeting the same screen size range would be:
+Similarly, media queries may span multiple breakpoint widths:
 
 {{< highlight scss >}}
 @include media-breakpoint-between(md, xl) { ... }
 {{< /highlight >}}
+
+Which results in:
+
+{{< highlight scss >}}
+// Example
+// Apply styles starting from medium devices and up to extra large devices
+@media (min-width: 768px) and (max-width: 1199.98px) { ... }
+{{< /highlight >}}
+
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 998dd9974e..dbb649bb11 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -48,6 +48,8 @@ Changes to our source Sass files and compiled CSS.
   - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
 - Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
 - The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
+- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
+- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
 
 ## JavaScript