CSS Order

CSS Order

The CSS order property controls the visual ordering group of a flex item within a flex container without changing the item's position in the HTML source.

Flex items are normally displayed according to their source order. By assigning different order values, items can be displayed earlier or later in the Flexbox layout while the underlying document order remains unchanged.

How order Works

The order property accepts an integer that places a flex item into an ordering group.

.item {
  order: 1;
}

Flex items are laid out in ascending order according to their order values. Items with smaller values are placed before items with larger values.

.item-a {
  order: 1;
}
.item-b {
  order: 2;
}
.item-c {
  order: 3;
}

In this example, Item A is visually placed before Item B, and Item B is placed before Item C.

Default order

The initial value of order is 0.

.item {
  order: 0;
}

If every flex item has the default value, the items are displayed according to their normal Flexbox ordering and source order.

You do not need to explicitly declare order: 0 unless you are overriding another rule.

Positive order Values

A positive order value places an item after items that have smaller order values.

.item-2 {
  order: 1;
}

If the other flex items still use the default order: 0, Item 2 is placed after those items because 1 is greater than 0.

.item-1 {
  order: 2;
}
.item-2 {
  order: 1;
}
.item-3 {
  order: 3;
}

The visual sequence becomes Item 2, Item 1, Item 3 because their order values are 1, 2, and 3.

Negative order Values

The order property also accepts negative integers.

.featured-item {
  order: -1;
}

If the other flex items use the default value of 0, the item with order: -1 is placed before them because -1 is less than 0.

Negative values can be useful when an item needs to appear before other items without assigning a positive order value to every other flex item.

Items with the Same order

Multiple flex items can have the same order value.

.item {
  order: 1;
}

Items within the same ordering group retain their relative source order.

<div class="flex-container">
  <div class="item">Item A</div>
  <div class="item">Item B</div>
  <div class="item">Item C</div>
</div>

If all three items use the same order value, Item A remains before Item B, and Item B remains before Item C.

Source Order vs Visual Order

The order property changes the visual layout of flex items, but it does not rearrange the elements in the HTML document.

<div class="flex-container">
  <div class="first">First in HTML</div>
  <div class="second">Second in HTML</div>
  <div class="third">Third in HTML</div>
</div>

.first {
  order: 3;
}
.second {
  order: 1;
}
.third {
  order: 2;
}

The visual order becomes Second, Third, First, but the HTML source remains First, Second, Third.

This distinction is important because visual order is not necessarily the same as reading, focus, or navigation order.

order and Accessibility

The order property should not be used to correct HTML that is arranged in an illogical sequence.

Changing the visual order does not change the underlying document order. Assistive technologies and keyboard navigation can therefore encounter content in a sequence that differs from the visual presentation.

Write the HTML in a logical and meaningful order first. Use order only when changing the visual presentation does not make the document structure confusing or misleading.

order and flex-direction

The order property determines the ordering groups before the items are laid out according to the flex direction.

.flex-container {
  display: flex;
  flex-direction: row;
}
.item-1 {
  order: 2;
}
.item-2 {
  order: 1;
}

Changing flex-direction can change the direction in which the ordered items are displayed.

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

The order values still establish the ordering groups, while the reversed flex direction changes the direction in which those groups and items are laid out.

When to Use order

The order property is most useful for presentational adjustments where the logical structure of the content remains clear.

For example, a group of cards may contain a visually featured card that is moved earlier in a layout while the source remains logically organized.

.featured {
  order: -1;
}

Avoid using order to create a visual sequence that conflicts with the logical reading or keyboard navigation sequence.

CSS Order Example

The following example contains four flex items in the HTML source order Item 1, Item 2, Item 3, and Item 4. Different order values change their visual sequence without changing the HTML.

.item-1 {
  order: 2;
}
.item-2 {
  order: -1;
}
.item-3 {
  order: 1;
}
.item-4 {
  order: 0;
}