Add order first to grid (#24202)
* Add first class to grid framework to add negative ordering * Add order-first explination to the docs
This commit is contained in:
parent
1bde860c01
commit
c2fb64ce37
|
@ -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.
|
||||
|
|
|
@ -46,6 +46,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.order#{$infix}-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
@for $i from 1 through $columns {
|
||||
.order#{$infix}-#{$i} {
|
||||
order: $i;
|
||||
|
|
Loading…
Reference in New Issue