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