Revert "Allow individual grid classes to override `.row-cols` (#33621)" (#34612)

This reverts commit f2b47e1c8a263f4406255991af9fd55984c22a0e.

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 41760ef4eaa9a4b21e4faf5a18e7f5166e6498bc..59cc5637626fa0cc587cc503bafa29feb1b756bf 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -66,8 +66,8 @@
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    // .row-cols defaults must all appear before .col overrides so they can be overridden.
     $infix: breakpoint-infix($breakpoint, $breakpoints);
+
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
@@ -85,13 +85,7 @@
           }
         }
       }
-    }
-  }
 
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
       .col#{$infix}-auto {
         @include make-col-auto();
       }

diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md
index 6520019641415ea2498030ae26cd9eeda0f88509..05fc1bd65db42e61c0dadf44afa0234fe66d99a2 100644 (file)
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -299,9 +299,9 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 
 ### Row columns
 
-Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width.
+Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., `.col-md-4`), the row columns classes are set on the parent `.row` as a shortcut. With `.row-cols-auto` you can give the columns their natural width.
 
-Use these row columns classes to quickly create basic grid layouts or to control your card layouts and override when needed at the column level.
+Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
 
 {{< example class="bd-example-row" >}}
 <div class="container">
@@ -369,25 +369,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
 </div>
 {{< /example >}}
 
-{{< example class="bd-example-row" >}}
-<div class="container">
-  <div class="row row-cols-2 row-cols-lg-3">
-    <div class="col">Column</div>
-    <div class="col">Column</div>
-    <div class="col">Column</div>
-    <div class="col">Column</div>
-    <div class="col">Column</div>
-    <div class="col">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-    <div class="col-4 col-lg-2">Column</div>
-  </div>
-</div>
-{{< /example >}}
-
 You can also use the accompanying Sass mixin, `row-cols()`:
 
 ```scss