小屏幕图文混排错位的核心解法是使用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 提升易读性