Rename `.col-xs` to `.col` + some other cleanup (#21222)

* Use `breakpoint-min` instead of a counter

* Remove 'xs' from flexbox grid

4 files changed, 35 insertions, 34 deletions

diff --git a/docs/assets/scss/_featured-sites.scss b/docs/assets/scss/_featured-sites.scss
index 2fb0839f0..b0964a91e 100644
--- a/docs/assets/scss/_featured-sites.scss
+++ b/docs/assets/scss/_featured-sites.scss
@@ -2,7 +2,7 @@
   margin-right: -1px;
   margin-left: -1px;
 }
-.bd-featured-sites .col-xs-6 {
+.bd-featured-sites .col-6 {
   padding: 1px;
 }
 .bd-featured-sites .img-fluid {
diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss
index edba088c6..7b1b500b3 100644
--- a/docs/assets/scss/_responsive-tests.scss
+++ b/docs/assets/scss/_responsive-tests.scss
@@ -35,7 +35,7 @@
 .responsive-utilities-test {
   margin-top: .25rem;
 }
-.responsive-utilities-test .col-xs-6 {
+.responsive-utilities-test .col-6 {
   margin-top: .5rem;
   margin-bottom: .5rem;
 }
@@ -50,7 +50,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     > .not-visible {
       color: #999;
       border: 1px solid #ddd;
@@ -59,7 +59,7 @@
 }
 .visible-on,
 .hidden-on {
-  .col-xs-6 {
+  .col-6 {
     .visible {
       color: #468847;
       background-color: #dff0d8;
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 482392504..c6430424a 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -43,21 +43,21 @@ For example, here are two grid layouts that apply to every device and viewport,
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 2
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 2
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
   </div>
@@ -73,24 +73,24 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-6">
       2 of 3 (wider)
     </div>
-    <div class="col-xs">
+    <div class="col">
       3 of 3
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-5">
       2 of 3 (wider)
     </div>
-    <div class="col-xs">
+    <div class="col">
       3 of 3
     </div>
   </div>
@@ -106,24 +106,24 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
 {% example html %}
 <div class="container">
   <div class="row flex-items-md-center">
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       1 of 3
     </div>
     <div class="col-12 col-md-auto">
       Variable width content
     </div>
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       3 of 3
     </div>
   </div>
   <div class="row">
-    <div class="col-xs">
+    <div class="col">
       1 of 3
     </div>
     <div class="col-12 col-md-auto">
       Variable width content
     </div>
-    <div class="col-xs col-lg-2">
+    <div class="col col-lg-2">
       3 of 3
     </div>
   </div>
@@ -158,35 +158,35 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row flex-items-top">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-middle">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
   <div class="row flex-items-bottom">
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
-    <div class="col-xs">
+    <div class="col">
       One of three columns
     </div>
   </div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-top">
+    <div class="col flex-top">
       One of three columns
     </div>
-    <div class="col-xs flex-middle">
+    <div class="col flex-middle">
       One of three columns
     </div>
-    <div class="col-xs flex-bottom">
+    <div class="col flex-bottom">
       One of three columns
     </div>
   </div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col-xs flex-unordered">
+    <div class="col flex-unordered">
       First, but unordered
     </div>
-    <div class="col-xs flex-last">
+    <div class="col flex-last">
       Second, but last
     </div>
-    <div class="col-xs flex-first">
+    <div class="col flex-first">
       Third, but first
     </div>
   </div>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 8de8ccf46..68d7f7020 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -100,7 +100,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
-        <td><code>.col-xs-</code></td>
+        <td><code>.col-</code></td>
         <td><code>.col-sm-</code></td>
         <td><code>.col-md-</code></td>
         <td><code>.col-lg-</code></td>
@@ -329,7 +329,7 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
 
 ### Example: Mobile and desktop
 
-Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-xs-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
+Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding `.col-*` and `.col-md-*` to your columns. See the example below for a better idea of how it all works.
 
 <div class="bd-example-row">
 {% example html %}
@@ -385,6 +385,7 @@ Here's the source code for creating these styles. Note that column overrides are
   margin-right: 0;
   margin-left: 0;
 
+  > .col,
   > [class*="col-"] {
     padding-right: 0;
     padding-left: 0;