Press
/
to search

Flexbox

Order

Utilities for controls how flex items are ordered.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
order-firstorder: -9999
order-lastorder: 9999
order-noneorder: 0
classcss
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

Usage

1
2
3
4
5
Original
1
order-5
2
order-1
3
order-4
4
order-3
5
order-2
1
order-last
2
3
4
order-first
5
<div class="flex">
  <div class="order-4">
    ...
  </div>
  <div class="order-1">
    ...
  </div>
</div>
HTML
.dummy-parent {
  @extend
    .flex;
}
.dummy-child-4 {
  @extend
    .order-4;
}
.dummy-child-1 {
  @extend
    .order-1;
}
SCSS