浮动不支持顺序重排，小屏下应改用Flexbox的order属性实现视觉顺序切换，保持DOM语义和可访问性。
浮动（float）本身不支持顺序重排，小屏下想改变元素视觉顺序，不能靠 float 实现。真正可靠的做法是放弃 float 布局，改用 Flexbox 的 order 属性，或在响应式断点中通过 CSS 控制显示顺序，必要时配合 HTML 结构微调 —— 但一般无需改动 DOM 顺序。
用 flex + order 实现视觉顺序切换
将父容器设为 display: flex，子元素用 order 控制排列优先级（默认为 0，数值越小越靠前）：
- 桌面端保持原序：不设
order或统一设为 0 - 小屏需交换 A 和 B 的位置：给 A 设
order: 2，B 设order: 1 -
order支持负值，比如order: -1可让某元素永远排最前
用媒体查询在断点处切换 order 值
在小屏断点内覆盖 order，无需 JS 或改 HTML：
.container { display: flex; flex-direction: column; }
.item-a { order: 0; }
.item-b { order: 1; }
@media (max-width: 768px) {
.item-a { order: 1; }
.item-b { order: 0; }
}
这样小屏上 B 就显示在 A 上方，语义和 DOM 顺序不变，可访问性友好。
立即学习“前端免费学习笔记（深入）”；
避免强行用 float 模拟重排
float 不具备重排序能力，有人试图用 float: right + 清除浮动 + 负 margin 等方式“绕开”，结果往往：
- 布局脆弱，稍一改动就错位
- 小屏下高度不一致时容易塌陷或重叠
- 无法真正改变阅读顺序，影响屏幕阅读器体验
DOM 顺序要不要改？通常不用
除非内容逻辑本身在小屏下完全颠倒（如侧边栏变成顶部导航），否则建议保持 HTML 顺序语义化，仅用 CSS 的 order 调整视觉流。这样既利于 SEO，也保障无障碍访问。真需要 DOM 变动（如不同设备加载不同结构），应由 JS 动态插入或服务端渲染控制，而非 CSS 干预。
基本上就这些。flex order 是现代响应式布局中替代 float 重排最直接、稳定、可维护的方案。
