Order
Set the order of flex items in a flex container with order utilities.
👉
flex
,
direction
,
grow
,
shrink
,
wrap
,
align-items
,
align-self
,
align-content
,
justify-content
,
place-content
,
order
|
Class
|
Properties
|
|---|---|
| order-1 | |
| order-2 | |
| order-3 | |
| order-4 | |
| order-5 | |
| order-first | |
| order-last |
Numeric
Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value from 0 to 5, add custom CSS for any additional values needed.
1
2
3
<div class="d-flex justify-content-between">
<div class="order-3">1</div>
<div class="order-1">2</div>
<div class="order-2">3</div>
</div>
First or last
Additionally there are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.
1
2
3
<div class="d-flex justify-content-between">
<div class="order-last">1</div>
<div class="order-first">2</div>
<div>3</div>
</div>