Rename order utilities to intended class names (#21739)

* rename order utilities to intended class names

* Documentation fixes.

diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 58e51946e97ee660318391e463263dd737b14aed..4d0d3e6e8ea3b58b74d3846d07fab0abc7ee4ea3 100644 (file)
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -514,13 +514,13 @@ Use flexbox utilities for controlling the **visual order** of your content.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col flex-unordered">
+    <div class="col order-0">
       First, but unordered
     </div>
-    <div class="col flex-last">
+    <div class="col order-last">
       Second, but last
     </div>
-    <div class="col flex-first">
+    <div class="col order-first">
       Third, but first
     </div>
   </div>

diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md
index 9b6add5c46cb970cb40229c071999cac6ec078b1..9bca028486872a37f275c3a89cd1de97207d8438 100644 (file)
--- a/docs/utilities/flexbox.md
+++ b/docs/utilities/flexbox.md
@@ -354,9 +354,9 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
 
 {% example html %}
 <div class="d-flex flex-nowrap bd-highlight">
-  <div class="flex-last p-2 bd-highlight">First flex item</div>
+  <div class="order-last p-2 bd-highlight">First flex item</div>
   <div class="p-2 bd-highlight">Second flex item</div>
-  <div class="flex-first p-2 bd-highlight">Third flex item</div>
+  <div class="order-first p-2 bd-highlight">Third flex item</div>
 </div>
 {% endexample %}
 
@@ -365,7 +365,7 @@ Responsive variations also exist for `order`.
 {% for bp in site.data.breakpoints %}
 - `.order{{ bp.abbr }}-first`
 - `.order{{ bp.abbr }}-last`
-- `.order{{ bp.abbr }}-unordered`{% endfor %}
+- `.order{{ bp.abbr }}-0`{% endfor %}
 
 ## Align content
 

diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 1b98aaa3fa8bcbd15dd458276d0c2015b5ac833e..cc696785dcbf02b73312e0f678c248b4c29b3239 100644 (file)
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -6,9 +6,9 @@
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    .flex#{$infix}-first     { order: -1; }
-    .flex#{$infix}-last      { order: 1; }
-    .flex#{$infix}-unordered { order: 0; }
+    .order#{$infix}-first { order: -1; }
+    .order#{$infix}-last  { order: 1; }
+    .order#{$infix}-0     { order: 0; }
 
     .flex#{$infix}-row            { flex-direction: row !important; }
     .flex#{$infix}-column         { flex-direction: column !important; }