Retour au cours

Lesson 58: Flex Item Property: order

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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.