CSS flex-order Property — Reorder Flex Items Without Changing HTML

The CSS order property changes the visual display order of flex items without modifying the HTML. Items are sorted by ascending order value — default is 0 for all items.

Build flexbox layouts with the Flexbox Generator.

Basic order syntax

.container {
  display: flex;
}

/* HTML order: A B C D */
.item-a { order: 3; }   /* Displayed: 4th */
.item-b { order: 1; }   /* Displayed: 2nd */
.item-c { order: 0; }   /* Displayed: 1st (default) */
.item-d { order: 2; }   /* Displayed: 3rd */

/* Visual order: C A B C D → C B D A */
/* Wait: A=3, B=1, C=0, D=2 → Visual: C(0), B(1), D(2), A(3) */

All items default to order: 0. Items with the same order value maintain their source order relative to each other.

Negative order values (send to front)

/* Send a featured item to the front: */
.featured {
  order: -1;  /* Displays before all order: 0 items */
}

/* Send a low-priority item to the end: */
.archive {
  order: 9999;  /* Displays last */
}

Responsive reordering

A common pattern: swap the order of columns on mobile vs desktop.

<div class="layout">
  <main>Primary content (should be first on mobile)</main>
  <aside>Sidebar (secondary on mobile)</aside>
</div>

/* Desktop: sidebar on the left */
@media (min-width: 768px) {
  .layout {
    display: flex;
    gap: 2rem;
  }
  
  aside { order: -1; }  /* Move sidebar before main on desktop */
  main  { order: 0; }   /* main stays in place */
}

/* Mobile: main content first (source order), no order needed */

This keeps <main> first in the HTML (better for SEO and screen readers) while visually placing the sidebar on the left in desktop layouts.

Order with flex-direction: column

/* Reorder sections vertically on mobile */
.page {
  display: flex;
  flex-direction: column;
}

.hero        { order: 1; }
.features    { order: 2; }
.testimonials { order: 4; }
.pricing     { order: 3; }  /* Show pricing before testimonials */

Holy grail layout with order

<div class="holy-grail">
  <header>Header</header>
  <main>Main Content</main>   <!-- Source: 2nd, appears 2nd on mobile -->
  <nav>Navigation</nav>        <!-- Source: 3rd, appears 1st on desktop -->
  <aside>Sidebar</aside>       <!-- Source: 4th, appears 3rd on desktop -->
  <footer>Footer</footer>
</div>

.holy-grail {
  display: flex;
  flex-direction: column;
}

/* Desktop: three-column layout */
@media (min-width: 900px) {
  .holy-grail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  header, footer {
    flex: 0 0 100%;
  }
  
  nav   { order: 1; flex: 0 0 200px; }
  main  { order: 2; flex: 1; }
  aside { order: 3; flex: 0 0 200px; }
}

Accessibility warning

order creates a disconnect between visual order and DOM order.

Keyboard navigation follows DOM order, not visual order. This creates confusion for:

• Keyboard-only users (Tab key follows source order)
• Screen readers (read in source order)

/* ❌ Accessibility problem: */
/* If a "Buy Now" button appears first visually via order: -1,
   but is 5th in the DOM, keyboard users will encounter it unexpectedly */

/* ✅ Better: fix the HTML order or use flex-direction: row-reverse */
.container {
  flex-direction: row-reverse;  /* Reverses everything, including Tab order? No! */
  /* Tab order still follows source order */
}

Rule: Only use order when the visual reordering is purely cosmetic and doesn’t affect the logical reading/navigation sequence. If it matters for usability, reorder the HTML.

Flex-wrap and order interaction

/* order affects position within each wrapping row: */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Items are sorted by order first, then wrapped into rows */
/* Items with order: 0 fill the first row, then order: 1, etc. */

Related tools

• Flexbox Generator — visualize flex layouts
• CSS Grid Generator — grid-based ordering
• HTML Minifier — clean up HTML structure