The order property in CSS controls the order in which flex items appear within a flex container, regardless of their source order in the HTML. By default, all flex items have an order value of 0, but you can assign positive or negative values to rearrange them.

Syntax

1
order: <integer>;
2
Default value is 0.

Behavior

1
Items with lower order values appear first.
2
Items with equal order values are displayed in the order they appear in the HTML.
3
Changing the order value only affects visual order, not the document source order.

Example: Using the order Property

In this example, although Item 1 appears first in the HTML, it is displayed last because its order value is higher than the others.

Best Practices

1
Use order sparingly to avoid confusion between visual and source order.
2
Avoid changing order for accessibility-critical elements (e.g., forms, navigation).
3
Prefer logical HTML ordering and use CSS for visual enhancements only.

Difficulty: 6/10

Topics: flex order, visual vs DOM order, responsive layout reordering

Scenario Questions

0-2 years experience

1
You have three flex items — a header, main content, and sidebar — and you want the sidebar to appear first visually on mobile, but it’s last in the HTML. How would you use the order property to achieve that?
2
If you set order: 2 on one flex item and order: 1 on another, but they still appear in the same order, what’s the most likely mistake you made?
3
You’re told to make a button appear before text in a flex container on tablet view. How would you implement that using order?

2-5 years experience

1
A feature team reports that on mobile, the navigation menu appears before the logo in the header, but users are confused because the logo is first in the HTML. How would you investigate and fix this without breaking accessibility?
2
Your responsive card layout uses order to rearrange content on small screens, but QA found that screen readers read items in DOM order, not visual order. How do you reconcile visual reordering with accessibility requirements?
3
A flex-based product grid uses order to swap image and text on mobile, but now the layout breaks when a new dynamic component is added. What could be causing this, and how would you debug it?

5-8 years experience

1
You’re designing a reusable card component that needs to reorder content based on device, user preference, and A/B test variants. How would you architect the CSS and component API to support dynamic order changes without causing layout thrashing or accessibility regressions?
2
In a large design system, multiple teams are using order to rearrange flex items in different contexts. You’re seeing inconsistent behavior across pages. How would you standardize usage and prevent layout conflicts or accessibility violations?
3
A legacy layout uses order extensively to fix old float-based designs. You’re migrating to a new grid system but can’t remove order yet due to backward compatibility. How do you minimize technical debt while maintaining functionality?

8+ years experience

1
You’re leading a cross-team initiative to unify layout patterns across 20+ products. Many use order for visual reordering, but it’s causing accessibility audits to fail. How would you design a company-wide strategy to phase out misuse while preserving UX intent?
2
A major product relies on order to dynamically reorder critical UI elements based on user roles. As you scale to 10M+ users, you’re seeing performance bottlenecks in layout recalculation. How would you evaluate whether order is the right tool here, and what alternatives would you propose?
3
You’re migrating a legacy UI framework that uses order for RTL layout support. The new design system uses CSS logical properties. How do you plan the migration to avoid breaking existing layouts, and how do you ensure long-term maintainability without relying on order for directional logic?

Follow-up Questions

❓What happens if you set order on a non-flex item?
❓How would you debug a layout where items appear in the wrong visual order?
❓Could this break screen readers if not used carefully?