order

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0.

In the above demo, select the options on the left-hand side to change the value of the pink box’s order property. The light blue boxes have been given fixed order values.

Bear in mind the effect of source order. For example, when order: 2; is selected, the pink box is placed before the two blue boxes with order: 2;. This is because the pink box appears before the blue boxes in the source code.

Syntax example: order: 5;