Flexbox allows you to change the visual order of items without altering the HTML structure by using the order property. By default, all items have order: 0, and you can assign positive or negative values to move items forward or backward along the main axis.

Key Techniques

1
Set the container's display to flex.
2
Use the order property on individual flex items to define their visual position.
3
Lower order values appear first, higher values appear later.
4
You can mix positive, negative, and zero values for precise ordering.
5
Changing order does not affect the source HTML, preserving accessibility and document structure.

Example: Reordering Flex Items

In this example, although Item 3 is last in the HTML, it appears first visually because it has the lowest order value. Flexbox allows you to rearrange items dynamically without touching the HTML.

Difficulty: 4/10

Topics: flex-order, visual reordering, CSS layout semantics

Scenario Questions

0-2 years experience

1
You're building a mobile product listing where the price needs to appear above the name on small screens, but the HTML has name first. How would you fix this using Flexbox without touching the HTML?
2
A designer wants the CTA button to show up first in a row on desktop but last on mobile — the HTML order is fixed. What CSS property would you use and how?

2-5 years experience

1
Our product card layout broke after a CSS update — the visual order changed unexpectedly on tablet view. The HTML hasn’t changed. What would you check first, and how would you debug the flex order issue?
2
We’re reordering form fields visually using flex-order for responsive layouts, but accessibility testers say screen readers read them in HTML order. How do you reconcile visual design with accessibility?

5-8 years experience

1
We have a dynamic component library where order is controlled via a theme config — how do you ensure visual reordering with flex-order doesn’t cause layout thrashing or performance issues on low-end devices?
2
A legacy component uses flex-order to reorder content based on user preferences, but now we’re migrating to a headless CMS that outputs HTML in a fixed structure. How do you maintain visual flexibility without breaking existing layouts or accessibility?

8+ years experience

1
We’re standardizing our design system across 12 product teams, and some are heavily relying on flex-order to override semantic HTML for layout. How do you architect a solution that balances visual flexibility with accessibility, SEO, and long-term maintainability?
2
Our component library uses flex-order for A/B tested layouts, but we’re seeing inconsistent behavior in RTL locales and legacy browsers. How would you design a migration path to a more robust, future-proof layout strategy without breaking existing features?

Follow-up Questions

❓What happens if two items have the same order value?
❓How would you debug this if the reordering doesn't work in an older browser?
❓Could this affect screen readers? How would you handle it?