0Pricing
CSS Academy · Lesson

Order Property and Visual Reordering

Change the visual order of flex items without changing the DOM using the order property.

The order Property

The order property changes the visual order of flex and grid items without altering the DOM structure. Default is 0; higher values appear later; negative values appear earlier.

order Basics

Items are displayed from lowest to highest order value. Items with the same order value appear in DOM order.

.nav-logo   { order: 0; } /* first */
.nav-links  { order: 1; } /* second */
.nav-button { order: 2; } /* last */

All lessons in this course

  1. Flex Item Alignment Override with align-self
  2. Order Property and Visual Reordering
  3. Flex Shorthand Patterns
  4. Common Flexbox Layouts: Nav Cards Media Object
← Back to CSS Academy