Rename order utilities to intended class names (#21739)

* rename order utilities to intended class names

* Documentation fixes.

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>

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
 

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; }