Add order first to grid (#24202)

* Add first class to grid framework to add negative ordering

* Add order-first explination to the docs

2 files changed, 24 insertions, 0 deletions

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index 4a1a55e18..a194bd840 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -535,6 +535,26 @@ 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.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col">
+      First, but unordered
+    </div>
+    <div class="col">
+      Second, but unordered
+    </div>
+    <div class="col order-first">
+      Third, but first
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
 ### Offsetting columns
 
 You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 5e7d1ffb5..41bdf4646 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -46,6 +46,10 @@
         }
       }
 
+      .order#{$infix}-first {
+        order: -1;
+      }
+
       @for $i from 1 through $columns {
         .order#{$infix}-#{$i} {
           order: $i;