order

The order property declares the order of a flexible element in relation to the rest of the flexible elements within the same container.

Syntax

The element that the order property is applied to must be a flexible element or else the property will have no effect.

div.row {
  display: flex;
}

div.row .column.one {
  order: 1;
}

div.row .column.two {
  order: 2;
}

div.row .column.three {
  order: 3;
}

Values

number
Numerical value that designates the order for the flexible element. Default value is 0.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of order? Submit a codepen.io demo and we'll showcase it here ↴