如何通过媒体查询重排图文网格？移动端图片在上文本在下

没问题，用Flexbox配合CSS媒体查询就能完美解决这个移动端重排的需求！结合你提供的动态生成代码，我们可以通过纯CSS实现，无需修改CMS输出的HTML结构。

核心思路 #

针对桌面端已实现的交替图文布局，我们只需要在移动端：

• 让文本在前、图片在后的行，反转图文顺序，使图片居上
• 保持图片在前、文本在后的行原有顺序，自然实现图片居上

完整CSS代码 #

/* 基础Flex布局设置，确保桌面端交替并排效果正常 */
.container .row {
  display: flex;
  flex-wrap: wrap;
  /* 可选：给每行添加底部间距，提升视觉层次感 */
  margin-bottom: 2rem;
}

/* 移动端适配（对应Bootstrap的sm断点，屏幕宽度<768px时生效） */
@media (max-width: 767.98px) {
  /* 反转奇数行的排列方向，让原本在后方的图片列移到顶部 */
  .container .row:nth-child(odd) {
    flex-direction: column-reverse;
  }
  
  /* 可选：给移动端的列添加底部间距，让图文之间更透气 */
  .container .row > [class^="col-"] {
    margin-bottom: 1rem;
  }
}

效果说明 #

• 桌面端：.row的Flex布局配合Bootstrap的col-md-6类，保持你已经实现的交替图文并排效果，视觉美观度不受影响。
• 移动端：
  • 奇数行（第一、第三行）原本是「文本列 → 图片列」，通过flex-direction: column-reverse反转后，变成「图片列 → 文本列」，结合col-sm-12的100%宽度，实现图片在上、文本在下。
  • 偶数行（第二行）原本就是「图片列 → 文本列」，默认的flex-direction: column会让图片自然排在上方，完全符合需求。

这个方案兼容性极佳，flex和:nth-child在所有现代浏览器（包括IE11及以上）都能正常工作，完全适配你的动态生成场景。

内容的提问来源于stack exchange，提问作者user5283666