flex-direction: row-reverse 会全局镜像子元素，破坏语义与可访问性；响应式图文切换应优先用 media query + order 属性控制视觉顺序，保持 DOM 结构不变。
flex-direction: row-reverse 会翻转整个布局顺序
直接对图文容器设 flex-direction: row-reverse 看似能“切换左右”，但实际会把所有子元素（图、文、甚至内部按钮或链接）整体镜像，导致文字阅读方向异常、交互区域错位、语义结构混乱。这不是“切换布局”，而是破坏布局。
- 适用于纯视觉镜像场景（如 RTL 语言页面），不适用于“同一内容在不同断点下图文位置互换”
- 若图文本身是
div包裹的独立区块，row-reverse会让图排在左、文排在右——但这是靠改变顺序实现的，不是靠条件化定位 - 当图文内含表单、图标按钮或需要保持 DOM 顺序的可访问性元素时，该方式会导致屏幕阅读器读取顺序与视觉不符
响应式切换必须用媒体查询 + flex-direction 分别控制
真正的左右切换，是让图和文在小屏时上下堆叠（flex-direction: column），中大屏时按需设定图左文右或图右文左——关键在于：图和文的 HTML 顺序保持不变，仅靠 CSS 控制渲染顺序。
- HTML 中始终按语义写：先
img后div（或反之），不为样式妥协结构 - 小屏用
@media (max-width: 768px)设flex-direction: column，确保堆叠 - 大屏用
@media (min-width: 769px)，再分两套规则：
— 图左文右：保持默认flex-direction: row
— 图右文左：改用flex-direction: row-reverse（此时仅影响两个主区块，且 DOM 仍合理） - 注意
flex-direction不会重排 DOM，只影响渲染流，所以tabindex和焦点顺序仍按源码来
更稳妥的做法：用 order 属性微调单个子项
如果 HTML 固定为图在前、文在后，但希望大屏时文在左图在右，又不想用 row-reverse 带来的全局翻转风险，就用 order —— 它只移动指定元素的视觉位置，不影响其他属性或可访问性。
- 给图文容器设
display: flex - 给图片加
order: 2，给文字容器加order: 1，就能实现“文左图右”，且 DOM 顺序、语义、tab 键序都不变 - 配合媒体查询，在小屏时重置
order: 0，恢复原始顺序 -
order的默认值是 0，数值越小越靠前；负值也合法（如-1）
别忘了设置 flex-basis 或 width 防止图文塌陷
仅靠 flex-direction 或 order 不足以保证响应效果，常见问题是图或文在窄屏下被压缩成一条线，或在宽屏下溢出容器。
- 图文容器需设
width: 100%或max-width，避免脱离上下文流 - 图片建议用
flex: 0 0 auto+max-width: 100%，防止拉伸失真 - 文字区域建议设
flex: 1或明确flex-basis: 60%，避免被图片挤占空间 - 移动端务必测试
viewportmeta 标签是否已加：
实际最易忽略的是：当使用 order 时，若图文区块内还有嵌套 flex 容器，它们的 order 不会继承父级，得单独处理；而 flex-direction: row-reverse 会递归影响所有后代 flex 项目——这点一旦漏测，PC 端看着正常，手机端点开调试器才发现按钮全跑反了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
