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.

2 files changed, 16 insertions, 7 deletions

diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md
index 3fa3513ef..3d61ad67c 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 998dd9974..dbb649bb1 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