Order

Utilities for controlling the order of flex items.

Class	Properties
.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-7	order: 7;
.order-8	order: 8;
.order-9	order: 9;
.order-10	order: 10;
.order-11	order: 11;
.order-12	order: 12;
.order-first	order: -9999;
.order-last	order: 9999;
.order-reversed	flex-direction: row-reverse;
.order-regular	flex-direction: row;

Usage

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

1

2

3

Reverse order

Use .order-reversed on the parent container to quickly reverse the order of all children.

1

2

3

Responsive

To apply a flex direction utility only at a specific breakpoint, add @{breakpoint} add the end of the utility class.

1

2

3

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.