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

• .order-sm-first
• .order-sm-last
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-first
• .order-md-last
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-first
• .order-lg-last
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-first
• .order-xl-last
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12
• .order-xxl-first
• .order-xxl-last
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5
• .order-xxl-6
• .order-xxl-7
• .order-xxl-8
• .order-xxl-9
• .order-xxl-10
• .order-xxl-11
• .order-xxl-12

For example, use order-md-last to apply the order-last utility at only medium screen sizes and above.

<div class="order-first md:order-last">
  <!-- ... -->
</div>