AI Workshop: learn to build apps with AI →
Flexbox: Moving items before / after another one using order

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Items are ordered based on the order they are assigned. By default every item has order 0, and their order 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: Create a layout using Flexbox
8: How to have a flex child not fill entire height