Add order-last grid class (#24915)

* Add order-*-last grid class

* copy updates

2 files changed, 7 insertions, 9 deletions

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index efbc5520d..320872849 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -534,14 +534,14 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
 {% endexample %}
 </div>
 
-There's also a responsive `.order-first` class that quickly changes the order of one element by applying `order: -1`. This class 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: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
 
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col">
-      First, but unordered
+    <div class="col order-last">
+      First, but last
     </div>
     <div class="col">
       Second, but unordered
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 4f854f495..7b37f868f 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -46,14 +46,12 @@
         }
       }
 
-      .order#{$infix}-first {
-        order: -1;
-      }
+      .order#{$infix}-first { order: -1; }
+
+      .order#{$infix}-last { order: $columns + 1; }
 
       @for $i from 0 through $columns {
-        .order#{$infix}-#{$i} {
-          order: $i;
-        }
+        .order#{$infix}-#{$i} { order: $i; }
       }
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible