Decrease number of order utilities (#28874)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index e22935d827ff2c5ff0a67723466980971b698587..35a67d3fd38f9fd53047597a4d2bc22f4b967b5b 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -195,14 +195,7 @@ $utilities: map-merge(
         3: 3,
         4: 4,
         5: 5,
-        6: 6,
-        7: 7,
-        8: 8,
-        9: 9,
-        10: 10,
-        11: 11,
-        12: 12,
-        last: 13,
+        last: 6,
       ),
     ),
     // Margin utilities

diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index df606e22248ec1b1c51d505e9335508c13bbccf1..0da95311febebe6eb74e4019028f4926d7dcbc84 100644 (file)
--- a/site/content/docs/4.3/layout/grid.md
+++ b/site/content/docs/4.3/layout/grid.md
@@ -543,7 +543,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all five grid tiers.
 
 <div class="bd-example-row">
 {{< example >}}
@@ -552,7 +552,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
     <div class="col">
       First, but unordered
     </div>
-    <div class="col order-12">
+    <div class="col order-5">
       Second, but last
     </div>
     <div class="col order-1">
@@ -563,7 +563,7 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
 {{< /example >}}
 </div>
 
-There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
+There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
 
 <div class="bd-example-row">
 {{< example >}}

diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index 59c0c8af6fc193339097f79c4431cefd8fe99e02..3db2a451fb08deb6cf4ff579d1486f7802c3fbe3 100644 (file)
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -96,6 +96,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
 ## Utilities
 
 - Renamed `.text-monospace` to `.font-monospace`
+- Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12`. [See #28874](https://github.com/twbs/bootstrap/pull/28874).
 - **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
 - **Todo:** Split utilities into property-value utility classes and helpers
 

diff --git a/site/content/docs/4.3/utilities/flex.md b/site/content/docs/4.3/utilities/flex.md
index 244fc2198c7abd4e14eefd5a051bb7e935ef90f0..5c199871ecefd9c79d4fb4df0d50ccf36261ed33 100644 (file)
--- a/site/content/docs/4.3/utilities/flex.md
+++ b/site/content/docs/4.3/utilities/flex.md
@@ -423,7 +423,7 @@ Responsive variations also exist for `flex-wrap`.
 
 ## Order
 
-Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value (e.g., `5`), add custom CSS for any additional values needed.
+Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
 
 {{< example >}}
 <div class="d-flex flex-nowrap bd-highlight">
@@ -438,7 +438,19 @@ Responsive variations also exist for `order`.
 {{< markdown >}}
 {{< flex.inline >}}
 {{- range $bp := $.Site.Data.breakpoints -}}
-{{- range $i, $num := seq 0 12 }}
+{{- range $i, $num := seq 0 5 }}
+- `.order{{ $bp.abbr }}-{{ $i }}`
+{{- end -}}
+{{- end -}}
+{{< /flex.inline >}}
+{{< /markdown >}}
+
+Additionaly there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
+
+{{< markdown >}}
+{{< flex.inline >}}
+{{- range $bp := $.Site.Data.breakpoints -}}
+{{- range $i := slice "first" "last" }}
 - `.order{{ $bp.abbr }}-{{ $i }}`
 {{- end -}}
 {{- end -}}