Order

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

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.

<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.

<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>