diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 4a1a55e18f..a194bd8401 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 %} +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. + +
+{% example html %} +
+
+
+ First, but unordered +
+
+ Second, but unordered +
+
+ Third, but first +
+
+
+{% endexample %} +
+ ### 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 5e7d1ffb54..41bdf4646d 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;