Flex布局中order属性可改变非文字元素视觉顺序，需父容器设display: flex且作用于子元素；Grid用grid-row/grid-column精确定位；纯流式布局只能调整HTML结构；无障碍顺序须与视觉一致。
Flex布局下用order改图片/视频等非文字元素顺序
当容器是display: flex时，order属性直接决定视觉排列，HTML结构顺序完全失效。比如轮播图里想把第三张图提前到第一位置，不是去挪<img>标签，而是给它加order: -1。
-
order默认值是0，数值越小越靠前；负数优先级高于正数 - 必须作用在flex子元素上，父容器没设
display: flex时无效 - 别和
float或position: absolute混用——它们会让order彻底失效 - 如果多个元素
order相同，才回落到HTML原始顺序
Grid布局中靠grid-row/grid-column精确定位
Grid适合需要二维控制的场景，比如图文卡片里让视频占两行、图片占一列、文字从第二行开始填满剩余空间。此时grid-row和grid-column比order更可靠，因为它们不依赖主轴方向。
-
grid-row: 2 / 4表示从第2行线开始、到第4行线结束（即跨2行） - 若父容器没定义足够多的网格轨道，比如只写了
grid-template-rows: 1fr 1fr，却给某元素设grid-row: 5，它会溢出或错位 - 用
grid-area可以一次性指定行列起止，但要同步更新grid-template-areas字符串，否则无效 -
auto-fit和auto-fill对grid-row无影响，定位只看显式定义的轨道数
纯流式布局（无Flex/Grid）时只能动HTML结构
如果开发者工具里看到父容器的display是block或inline，没用Flex/Grid，那非文字内容（<img>、<video>、<svg>）的顺序就完全由HTML标签书写顺序决定。
- 直接剪切粘贴
<img src="a.jpg">和<video>标签能生效，但要注意JS是否动态插入——比如某些模板用document.createElement生成内容，改HTML源码没用 -
float: left会让元素脱离文档流，此时“顺序”变成视觉浮动叠加，很难预测 - 用
display: inline-block排图说时，HTML换行符会产生空格间隙，得在父容器加font-size: 0再在子元素里重设字号 - 所有非文字元素都该带
alt或aria-label，否则屏幕阅读器读取顺序会和视觉顺序错乱
用JavaScript动态插入时顺序由执行时机决定
当图片/视频通过fetch加载后用appendChild或insertAdjacentElement插入DOM，顺序就取决于JS代码执行顺序，而不是HTML源码位置。
立即学习“前端免费学习笔记（深入）”；
-
appendChild总把新元素插到最后；insertBefore(target, reference)才能精确控制插入点 - 异步加载下，如果三张图分别调
fetch再插入，网络延迟会导致实际渲染顺序和代码顺序不一致 - 用
Promise.all等全部加载完再统一插入，能保证顺序可控，但首屏加载会变慢 - 慎用
innerHTML +=拼接——它会触发整个容器重渲染，已存在的onload事件可能丢失
