Visual reordering should not rewrite logical order

What it is

Desktop is “nav | main.” Narrow widths want main above nav. The right move: main is first in the tree always; a wide grid paints nav on the left. Two wrong moves — order on the narrow band so vision shows main first while the tree still has nav first, or a script that rewrites the DOM at the breakpoint. Vision may move with width. Logical order should stay one content-first list, not be rewritten per band.

That source order drives the serial channel is the cause. This leaf locks stability across widths: when you move house, do not move the list.

Why it happens

Visual reorder at a breakpoint is common, because narrow and wide disagree about what belongs on the first screen. Layout tools let you change paint only. Change the tree as well, and logical order becomes a function of width: the same article, keyboard hits nav first on desktop and main first on a phone. Rotate or split across the breakpoint and the task order flips by itself.

order: -1 lifting a promo to the visual top while it remains last in the tree is another rewrite: vision claims “look at this first,” logic still says “you get here last.” Content-first wants logic still; vision follows, or at least does not claim a second ranking.

Where it stops holding

An A/B test that changes the flow, or a wizard whose steps themselves change, may change logical order — that is the product sequence changing, not layout sneaking a change at a breakpoint. Ads and live feeds appending at the end of the tree are not a reorder. RTL mirrors start/end; title-before-body stays.

Some legal pages force “read the notice before Submit appears.” That is a product constraint on logical order; vision must not hide Submit behind the notice.

Applying it

• Freeze a content-first tree: main nodes before nav, promo, footer. Each width only places them with the grid — no order, no DOM rewrite to flatter the first screen.
• When reviewing each breakpoint mock, diff it against that same tree. If visual “first” is not tree-first, either change the mock or admit vision is lying and budget for focus jumps.
• How to check: keyboard-walk both a narrow and a wide breakpoint; write down the two sequences. They should match. On a mismatch, find order, a media-query DOM rewrite, or two templates. Restore one tree and walk again; the lists should coincide. Rotating across the breakpoint should not throw focus to “the next item of the other logic.”

Related

• Same group: F2.14.1 Source order is what assistive tech and the keyboard walk · F2.14.3 When visual order and source order disagree, focus jumps
• Nearby: F2.10 Responsive breakpoints · F2.11 Fluid and adaptive layout · J2.08 Reading order
• Search terms: CSS order · logical order · content first · breakpoint DOM