Responsive CSS: keep reading order and controls usable

Collapse a two-column receipt view

The card grid below becomes one column when its sidebar would crowd the article. The DOM keeps the article before the sidebar in both states. That matters for screen readers and keyboard navigation; visual order rules should not hide a different logical order.

.receipt-view { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; }
.receipt-view > * { min-width: 0; }
@media (max-width: 48rem) {
  .receipt-view { grid-template-columns: minmax(0, 1fr); }
  .receipt-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
}

Test with the browser zoomed to 200% and with longer translated labels. The control row wraps rather than clipping buttons. A fixed bottom bar also needs safe-area spacing on devices with a home indicator.

Costs and boundaries

More breakpoints are not automatically better. A layout that needs many narrow exceptions often has an inflexible base rule. Start with content that can wrap and shrink; add a breakpoint where the reading experience actually breaks.

Common Mistakes

• Visual reordering can disagree with keyboard and screen-reader order.
• A viewport-only test misses zoom and long labels.
• Small text and tight controls remain hard to use even when the columns fit.

Read next

Revisit sizing and overflow, then inspect the cascade when a mobile override does not apply.

Continue this topic

• CSS media queries: change layout at a content failure point
• CSS container queries: adapt a component to its own space
• CSS logical properties: space content by reading direction

Continue with: Responsive UI prompts: test states, not one viewport.

Continue with the connected Web Development lesson: Page performance: budget the critical path and reserve layout space.