最稳响应式图文并排方案是CSS Grid搭配repeat(auto-fit, minmax(400px, 1fr))，自动适配列数、避免留白错位；配合grid-auto-rows: 1fr实现桌面端图文等高，移动端用flex-direction: column加order调整视觉顺序，图片须设max-width: 100%、height: auto及display: block防撑破与基线间隙。
直接用 grid，别碰 float 或纯 flex 做图文并排——前者语义断裂、后者在换行和等高上容易失控。
用 grid-template-columns: repeat(auto-fit, minmax())) 控制列数
这是目前最稳的响应式图文并排方案，不用写一堆媒体查询就能自动从两列退到一列。
-
minmax(400px, 1fr)表示每列至少 400px（适合中屏阅读宽度），空间够就均分；不够就收缩为单列 -
auto-fit会把空余列“收掉”，而auto-fill会留空白格，这里必须选auto-fit - 桌面端左右图文自动等高靠
grid-auto-rows: 1fr，不是靠align-items或 hack 高度 - 如果图文模块是卡片形式（图+标题+描述），每个卡片用一个
div包裹，grid作用于卡片级，不是图或文单独设
order 在 flex-direction: column 下才真正可控
想小屏时文字在上、图片在下，但 HTML 里图片必须写在前面（SEO/可访问性要求）？那就只在移动端切为单列后用 order。
- 桌面端保持
flex-direction: row，不设order；移动端媒体查询里切column，再统一用order: 1/order: 2 - 写了
order: 2没生效？先检查父容器有没有display: flex，再确认子项没被display: contents干扰 - 别用
order: -999或999，旧版 Safari 对极端值解析不稳定，用0/1就够 - 绝对不要在
flex-wrap: wrap容器里给图文元素同时设width和order，Firefox 旧版本可能错算尺寸
img 必须加 max-width: 100% 和 height: auto
否则图片会撑破容器、拉伸变形，甚至导致断点提前触发——这不是布局逻辑问题，是尺寸失控。
立即学习“前端免费学习笔记（深入）”；
-
width: 100%+height: auto是基础保底，确保按比例缩放 - 需要裁剪填充时用
object-fit: cover，但得配合明确宽高（比如卡片定高），否则在grid中可能溢出 -
display: block要加上，否则图片下方会有默认空白间隙（inline 元素的基线对齐残留） - 别给
img设flex: 1，它会和文字争宽度；应设flex: 0 0 auto（不伸缩、不压缩、按内容宽）
真正难的不是写对某一行 CSS，而是意识到：图文混排的本质是「语义结构」和「视觉呈现」的分离。HTML 写法要服从 SEO 与可访问性，CSS 才负责适配设备——所有想靠改 DOM 顺序来“适配”的做法，都会在后续维护中付出代价。
