Order

Usage

The flex property order, allows us to change the visual order of content within the DOM, without touching the HTML. This comes in handy when you want to re-order content for different viewports.

Notation:

You can target the order class by using flex-{breakpoint}-{amount}. The breakpoint being optional and one of our five breakpoints and the amount being a number from 1 to 12.
Order first and last classes are also bundled with mesh. order-{breakpoint}-first and order-{breakpoint}-last will place the content you target first or last in the container retrospectively.

Properties:

Class	Properties
.order-first	order: -1;
.order-last	order: 13;
.order-1	order: 1;
.order-2	order: 3;
.order-4	order: 4;
.order-5	order: 5;
.order-6	order: 6;
.order-7	order: 7;
.order-8	order: 8;
.order-9	order: 9;
.order-10	order: 10;
.order-11	order: 11;
.order-12	order: 12;

Examples

Using first & last classes:

Here the second item that appears in the DOM (second-child) has the order-tab-last class which will move it across in the container to the end from tablet screen widths and upwards.
The third item that appears in the DOM (third-child) has the order-desk-first class which will move it to the end of the container from desktop screen and upwards.
Go ahead and resize your screen and watch the items.

first child

second-child

last-child

<div class="d-flex justify-content-between">
    <div class="flex-item">first child</div>
    <div class="flex-item order-tab-last">second-child</div>
    <div class="flex-item order-desk-first">third-child</div>
</div>

Using number classes & columns:

The second item that appears in the DOM (5) has the order-2 class which will move it to the end of the container for all viewports/breakpoints.
Here the third item that appears in the DOM (3) has the order-desk-6 class which will place it fifth in our column sequence (as the order starts from zero) for desktop screens and above.
Go ahead and resize your screen and watch the items.

1

2

3

4

5

6

<div class="row justify-content-center">
    <div class="col-5">1</div>
    <div class="col-5 order-5">2</div>
    <div class="col-5 order-desk-4">3</div>
    <div class="col-5">4</div>
    <div class="col-5">5</div>
    <div class="col-5">6</div>
</div>

Variations

<!-- Default -->
<div class="order-first"></div>
<div class="order-last"></div>
<div class="order-1"></div>
<div class="order-2"></div>
<div class="order-3"></div>
<div class="order-4"></div>
<div class="order-5"></div>
<div class="order-6"></div>
<div class="order-7"></div>
<div class="order-8"></div>
<div class="order-9"></div>
<div class="order-10"></div>
<div class="order-11"></div>
<div class="order-12"></div>
<!-- Mobile -->
<div class="order-mob-first"></div>
<div class="order-mob-last"></div>
<div class="order-mob-1"></div>
<div class="order-mob-2"></div>
<div class="order-mob-3"></div>
<div class="order-mob-4"></div>
<div class="order-mob-5"></div>
<div class="order-mob-6"></div>
<div class="order-mob-7"></div>
<div class="order-mob-8"></div>
<div class="order-mob-9"></div>
<div class="order-mob-10"></div>
<div class="order-mob-11"></div>
<div class="order-mob-12"></div>
<!-- Tablet -->
<div class="order-tab-first"></div>
<div class="order-tab-last"></div>
<div class="order-tab-1"></div>
<div class="order-tab-2"></div>
<div class="order-tab-3"></div>
<div class="order-tab-4"></div>
<div class="order-tab-5"></div>
<div class="order-tab-6"></div>
<div class="order-tab-7"></div>
<div class="order-tab-8"></div>
<div class="order-tab-9"></div>
<div class="order-tab-10"></div>
<div class="order-tab-11"></div>
<div class="order-tab-12"></div>
<!-- Desktop -->
<div class="order-desk-first"></div>
<div class="order-desk-last"></div>
<div class="order-desk-1"></div>
<div class="order-desk-2"></div>
<div class="order-desk-3"></div>
<div class="order-desk-4"></div>
<div class="order-desk-5"></div>
<div class="order-desk-6"></div>
<div class="order-desk-7"></div>
<div class="order-desk-8"></div>
<div class="order-desk-9"></div>
<div class="order-desk-10"></div>
<div class="order-desk-11"></div>
<div class="order-desk-12"></div>
<!-- HD -->
<div class="order-hd-first"></div>
<div class="order-hd-last"></div>
<div class="order-hd-1"></div>
<div class="order-hd-2"></div>
<div class="order-hd-3"></div>
<div class="order-hd-4"></div>
<div class="order-hd-5"></div>
<div class="order-hd-6"></div>
<div class="order-hd-7"></div>
<div class="order-hd-8"></div>
<div class="order-hd-9"></div>
<div class="order-hd-10"></div>
<div class="order-hd-11"></div>
<div class="order-hd-12"></div>