order Property

sort
Controls the visual order of flex items
looks_one
Default value: 0 (items appear in source order)
exposure_neg_1
Negative values appear before positive values
compare_arrows
Doesn't affect tab order or screen reader order
code
HTML structure remains unchanged
code order Examples
.item-1 {
  order: 2;
}

.item-2 {
  order: 1;
}

.item-3 {
  order: 3;
}

/* Visual order: 2, 1, 3 */
compare_arrows Source vs. Visual Order
HTML:
1
2
3
CSS:
order: 2
order: 1
order: 3
Result:
2
1
3
format_list_numbered Example 1: Basic Reordering
1 order: 2
2 order: 1
3 order: 3
exposure_neg_1 Example 2: Using Negative Values
1 order: -1
2 order: 1
3 order: 0