小屏幕图文混排错位的核心解法是使用flex布局：设容器display: flex; flex-wrap: wrap;，图片flex: 0 0 100%且max-width: 100%; 文字flex: 1，用order调整视觉顺序，并配合gap、align-items等提升可读性。
小屏幕下图文混排错位，核心问题通常是默认文档流在窄视口下无法自适应换行，或图片与文字的 DOM 顺序和视觉顺序不一致。用 flex 的 flex-wrap: wrap 配合 order 可以灵活控制布局断点和元素层级关系，无需 JS 就能实现响应式图文重排。
用 flex-wrap 让图文自动换行对齐
默认块级元素在小屏会撑宽容器或溢出。将图文容器设为 display: flex 并启用换行，是基础解法：
- 给外层容器加
display: flex; flex-wrap: wrap;，子元素（如图片、标题、段落）就可按需折行 - 为图片设置固定宽度（如
flex: 0 0 100%或width: 100%），确保小屏时独占一行 - 文字内容用
flex: 1占满剩余空间，大屏并排、小屏自动下移
用 order 调整视觉顺序，解决“图在上、文在下”反直觉问题
HTML 结构常把图片写在前面，但移动端更希望标题/摘要优先阅读。order 可改变渲染顺序而不改 HTML：
- 默认所有元素
order: 0；把标题设为order: -1，它就会显示在最前 - 图片设为
order: 1，段落设为order: 2，小屏下自然变成「标题 → 段落 → 图片」 - 配合媒体查询，在大屏恢复原序：
@media (min-width: 768px) { img { order: 0; } h3 { order: 0; } }
注意 flex 项目最小尺寸导致的换行失效
即使写了 flex-wrap: wrap，如果子项设置了过大的 min-width（比如图片没设 max-width: 100%），仍会强制不换行、横向溢出：
立即学习“前端免费学习笔记（深入）”；
- 所有图片必须加
max-width: 100%; height: auto;，防止拉伸变形和阻塞换行 - 避免对 flex 子项设死宽高，优先用
flex-basis或flex缩放比例 - 必要时用
flex-shrink: 1允许压缩，尤其文字容器里含长单词时
结合 gap 和 align-items 提升小屏阅读体验
仅靠换行还不够，间距和垂直对齐影响可读性：
- 用
gap: 1rem替代 margin，避免外边距合并问题，响应式更干净 -
align-items: flex-start防止文字基线与图片底部对不齐（默认是stretch） - 小屏段落文字可加
line-height: 1.6和font-size: 1rem提升易读性
