CSS Flexbox Order: How to Reorder Items (And the Accessibility Trap)

CSS Flexbox order is a double-edged sword.

It visually moves elements around, but the DOM stays exactly the same. This breaks screen readers and keyboard navigation if you aren't careful.

Let's look at how it works and when to avoid it.

---

How the order Property Works

By default, all flex items have an order of 0. They appear in the same order they are written in the HTML.

By changing the order value, you can push items forward or backward.

.container {
  display: flex;
}

.item-1 {
  order: 2; /* Moves to the end */
}

.item-2 {
  order: 1; /* Moves to the middle */
}

.item-3 {
  order: -1; /* Moves to the front */
}

Items with a lower order number appear first. If two items have the same number, they fall back to their source order in the HTML.

---

The Accessibility Trap

Using the order property only changes the visual order. It does not change the DOM (Document Object Model) order.

If a keyboard user tabs through the page, they will follow the DOM order, which might jump around the screen unpredictably. Screen readers also follow the DOM order.

If the visual order is critical to understanding the content (like form steps), you should reorder the HTML itself. Use order only for cosmetic layout shifts.

---

A Common Use Case: The Responsive Sidebar

The most common acceptable use for order is moving a sidebar on mobile.

Desktop: The layout is [Main Content] [Sidebar].
Mobile: You want the sidebar to appear below the main content.

Instead of duplicating the HTML and hiding one version with CSS, you can use order.

@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    order: 2; /* Pushes sidebar to the bottom */
  }

  .main-content {
    order: 1;
  }
}

Because the main content is usually the primary focus, having it first in the DOM and first visually is good for accessibility.

---

Common Gotchas

• Tab Order: Always test your layout with the Tab key. If the focus ring jumps around the screen, your order property is breaking accessibility.
• Screen Readers: Users of assistive technology read the page top-to-bottom based on the DOM, not the visual layout.
• Specificity: If you have nested flex containers, the order property only applies within the direct parent.

---

Prototyping Visually

If you want to simulate how the order property repositions flex items without altering the source DOM, I built a free CSS Flexbox Order Simulator.

What it does:

• Simulates flex item repositioning visually
• Shows how order affects DOM accessibility
• Exports clean CSS

Try it here

100% client-side. Nothing uploaded.

---

Have you ever accidentally broken tab order using the order property? Let me know in the comments.