Back to course

Lesson 58: Flex Item Property: order

CSS Mastery: From Zero to Hero in 100 Lessons

58. Flex Item Property: order

The order property allows you to change the visual sequence of flex items, regardless of their source order in the HTML structure. This is especially useful for responsive design where you might want a sidebar to move below the main content on mobile, but keep the HTML sequential for accessibility.

How Order Works

  • order takes an integer value (positive, negative, or zero).
  • The default order for all flex items is 0.
  • Items are sorted from the lowest order value to the highest.
  • If two items have the same order value, they maintain their original source code order.

Example

html

A
B

css .container { display: flex; }

.item-a { order: 2; }

.item-b { order: -1; /* Lowest value, so it moves to the very start */ }

.item-c { order: 1; } /* Visual result: B, C, A */

Best Practice: Use simple, sequential numbers (-1, 0, 1, 2) rather than large gaps, as it makes reordering easier later.