order是唯一能改变Flex项目视觉顺序而不改HTML结构的CSS属性，仅对Flex子元素生效，数值越小越靠前，默认值0；需注意可访问性、维护性及与DOM顺序的分离。
flex布局下用order改视觉顺序但不碰HTML
想让后写的元素在页面上显示在前面，又不想动HTML结构？order是唯一干净解法。它只影响Flex容器内子项的渲染位置，不影响DOM顺序、可访问性或资源加载时机。
常见错误是给每个元素硬写order: 1、order: 2……结果一加新元素就得全调；正确做法是只对需要前置的元素设负值，比如order: -1，其余保持默认order: 0，靠自然文档流兜底。
-
order只对display: flex或display: inline-flex的直接子元素生效 - 多个元素
order值相同时，仍按HTML中出现顺序排列 - 移动端常用技巧：用媒体查询把导航栏
order: -1提至顶部，桌面端恢复默认
grid布局里靠grid-row和grid-column精确定位
Grid比Flex更强调“坐标式”控制，grid-row和grid-column能直接指定元素落在哪一行哪一列，完全脱离HTML顺序。
容易踩的坑是只改子元素定位，却忘了父容器的grid-template-rows或grid-template-columns没定义足够轨道——比如设了grid-row: 5但只声明了3行，元素就会溢出或错位。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-area配合grid-template-areas字符串最直观，但改一处就得同步更新两处 -
grid-row-start: 2等价于grid-row: 2，但后者会自动占满整行，前者更可控 - 避免混用
float或position: absolute，它们会让Grid定位失效
纯流式布局（无Flex/Grid）只能靠调整HTML顺序
如果父容器只是display: block或没设任何布局模式，那元素就是老老实实按HTML标签书写顺序从上到下、从左到右排布。这时候CSS再怎么折腾margin或transform，都只是“视觉欺骗”，不能真正改变渲染流。
特别注意：有些模板用JS动态插入内容（比如轮播图、评论区），这类区块的DOM顺序可能运行时被重排，手动调HTML源码根本无效。
- 剪切粘贴
<section>或<div class="block">标签是最直接方式 - 检查是否有
float: left干扰——它会让后续元素“绕行”，顺序变得不可预测 - 用开发者工具的Elements面板实时验证：选中元素→右键→“Scroll into view”，看是否真按你预期的位置渲染
倒序显示列表时flex-direction: column-reverse vs reversed属性
<ol reversed>不是标准属性，浏览器不识别；真正有效的只有CSS方案或JS操作。而flex-direction: column-reverse虽快，但会连带反转键盘Tab顺序和屏幕阅读器朗读顺序——这对可访问性是硬伤。
如果业务必须保持可访问性顺序不变，就别用column-reverse，改用JS翻转DOM节点顺序，但要注意事件绑定丢失问题。
- 用
Array.from(ol.children).reverse().forEach(el => ol.prepend(el))比innerHTML拼接安全，保留事件监听器 -
flex-direction: row-reverse用于水平倒序，column-reverse用于垂直倒序 - 所有CSS倒序方案都会同步反转无障碍顺序，若页面有残障用户，这点不能忽略
