order 与 reverse：只改视觉顺序，不改源码顺序
order（整数，默认 0）和 flex-direction: row-reverse / column-reverse 都能重排 item 的视觉位置——但它们只动绘制顺序,DOM 顺序、键盘 Tab 焦点顺序、屏幕阅读器朗读顺序一概不变。这条「视觉序 ≠
源码序」的裂缝是 flexbox 最常见的 a11y 陷阱。下面调 order 看视觉重排，再走一遍 Tab 看焦点顺序始终按 DOM。
两条排序规则。 其一，flex item 先按 order 升序排；order 相同的，按它们在 DOM 里的先后（稳定排序）。其二，order 可为负：order: -1 排到所有默认项(0)之前。其三，row-reverse
不只是翻转——它把主轴起点换到右侧，于是 justify-content: flex-start 也跟着靠右。
1 · 调 order，走 Tab
五个 item 上的大数字是它们的 DOM 序(1–5)，下方小字是当前 order 值。改 order 或切 row-reverse 看视觉重排；点「按 Tab 走一遍」，焦点会依 DOM 序 1→5 逐个跳（橙色角标标出第几步），与视觉位置对照——若两者不一致，键盘用户的视线就会来回跳。
这是 WCAG 明确指出的问题。 order / *-reverse 制造的「视觉序 ≠ DOM 序」会同时违反两条：1.3.2 Meaningful Sequence（朗读顺序应符合内容含义）与 2.4.3 Focus Order（焦点顺序应可预期）。键盘用户按
Tab 时焦点会在页面上「乱跳」，读屏用户听到的顺序也和看到的不一致。
怎么用才稳妥。 把 order 当成纯视觉微调（例如响应式下把某块挪个位置），且确保调整后视觉顺序仍与 DOM 顺序大体一致；若顺序本身承载内容含义（步骤、阅读次序），应当改 DOM 顺序而非用
order 掩盖。单项沿主轴的位置微调，优先用 margin: auto 而非 order。