Decrease number of order utilities (#28874)

3 files changed, 18 insertions, 5 deletions

diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md
index df606e2224..0da95311fe 100644
--- 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 59c0c8af6f..3db2a451fb 100644
--- 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 244fc2198c..5c199871ec 100644
--- 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 -}}