F2.14.2visual reorder must not rewrite logical order设计
视觉重排不应改变逻辑顺序
别名: 视觉重排 · CSS order · 断点换序
概念解释
桌面是「导航 | 正文」，窄屏要把正文放到导航上面。正确做法是：树里永远正文在先，宽屏用网格把导航画到左边。错误做法有两种——窄屏用 order 把视觉改成正文在先、树仍是导航在先；或用脚本在断点处改 DOM。视觉可以随宽度搬家，逻辑顺序应保持同一份内容优先清单，不随断点改写。
源顺序决定串行通道，是原因；这里锁的是跨宽度的稳定性：搬家时不要连清单一起搬。
机制
断点处的视觉重排很常见，因为窄宽对「谁该在首屏」的答案不同。布局工具让你可以只改绘制。若同时改树，逻辑顺序变成宽度的函数：同一篇内容，键盘在桌面先经过导航，在手机先经过正文。用户旋转或分屏穿越断点时，任务顺序自己翻了。
order: -1 把促销条视觉上提到顶、树里仍在最后，是另一种改写：视觉声称「先看这个」，逻辑仍说「最后才到」。内容优先要求逻辑稳住，视觉跟逻辑走，或至少不声称另一套先后。
边界
A/B 实验故意改流程、向导步骤本身在变，逻辑顺序可以变，但那是产品流程在变，不是布局在断点处偷偷变。广告插入、实时 feed 在树尾追加，不算重排。RTL 是方向镜像，起始/末尾对调，逻辑先后（先标题后正文）仍然不变。
有些法律页强制「先看完声明再出现提交」，那是逻辑顺序的产品约束，视觉也不能把它藏到后面。
怎么落地
- 把内容优先的树写死：主内容节点在附属导航、促销、页脚之前。各宽度只用网格放位置，不用
order或改 DOM 去迎合首屏。 - 评审每个断点的视觉稿时，对照同一份树。视觉上的「第一」若不是树上的第一，要么改视觉，要么承认你在用视觉撒谎并准备承担焦点乱跳。
- 验证：在窄宽两个断点都做一次键盘走查，列出先后名单。两份名单应当相同。不同的那一项，查是
order、是媒体查询里改了 DOM，还是两套模板。改回同一份树后再走，名单应重合。旋转穿越断点时，焦点不应跳到「另一套逻辑的下一号」。