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