diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/layout/grid.md | 20 |
1 files changed, 20 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. |