Flexbox: Moving items before / after another one using order

Items are ordered based on a order they are assigned. By default every item has order 0 and the appearance in the HTML determines the final order.

You can override this property using order on each separate item. This is a property you set on the item, not the container. You can make an item appear before all the others by setting a negative value.

Moving items before or after another one

Lessons in this unit:

0: Introduction
1: Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: ▶︎ Moving items before / after another one using order
5: Vertical alignment using align-self
6: Grow or shrink an item if necessary
7: DEMO Create a layout using Flexbox
Want to learn more? Check out our courses