Order

Utilities for controlling the order of flex items


Class reference

ClassProperties
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-firstorder: -9999;
order-lastorder: 9999;
order-noneorder: 0;

# Usage

Use .order-{order} to render flex items in a different order than they appear in the DOM.

1
2
3
<div class="flex justify-between ...">
<div class="order-last">1</div>
<div>2</div>
<div>3</div>
</div>

# Responsive

To apply a flex direction utility only at a specific breakpoint, add a {screen}: prefix to the existing class name. For example, adding the class md:flex-row to an element would apply the flex-row utility at medium screen sizes and above.

<div class="flex">
<div>1</div>
<div class="order-first md:order-last">2</div>
<div>3</div>
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.