diff --git a/scss/_grid.scss b/scss/_grid.scss index d36ee75d8874..57ec5a9d0b94 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -25,11 +25,19 @@ max-width: $container-max-width; } + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + @each $name, $width in $grid-breakpoints { - @if ($container-max-width > $width or $breakpoint == $name) { + @if ($extend-breakpoint) { .container#{breakpoint-infix($name, $grid-breakpoints)} { @extend %responsive-container-#{$breakpoint}; } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } } } }