Contents
The order utilities to change the visual order of specific flex items. We only provide options for making an item first or last, as well as a reset to use the DOM order.
Quick reference
Class | Properties |
---|---|
.order-0 | order: 0; |
.order-1 | order: 1; |
.order-2 | order: 2; |
.order-3 | order: 3; |
.order-4 | order: 4; |
.order-5 | order: 5; |
.order-6 | order: 6; |
.order-first | order: -9999; |
.order-last | order: 9999; |
Basic usage
Ordering flex and grid items
Use order-{order}
to render flex and grid items in a different order than they appear in the DOM.
01
02
03
<div class="d-flex justify-content-between">
<div class="order-3">01</div>
<div class="order-2">02</div>
<div class="order-1">03</div>
</div>
To last
Use order-last
to render flex and grid items in the last than they appear in the DOM.
01
02
03
<div class="d-flex justify-content-between">
<div class="order-last">01</div>
<div>02</div>
<div>03</div>
</div>
Breakpoints
All flex direction utilities that supports responsive at specific breakpoints, from xs
to xxl
, have no breakpoint abbreviation in them.
The responsive classes are named using the format order-{breakpoint}-{order}
.
For example, use order-md-last
to apply the order-last
utility at only medium screen sizes and above.
<div class="order-first order-md-last">
<!-- ... -->
</div>
Edit this page on Github
Last updated on April 6, 2024