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

没问题，这个需求用Flexbox的order属性就能完美搞定，核心思路是在移动端媒体查询里重新调整列的排列顺序——不管桌面端的交替布局怎么排，强制让图片列始终排在文本列前面。下面给你分几种场景的解决方案：

方案一：无需修改CMS生成的HTML（用现代CSS选择器） #

如果你的项目面向现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），可以直接通过子元素特征定位列，完全不用改动CMS输出的代码：

/* 桌面端保持原有交替布局，不需要额外样式 */

/* 移动端适配（对应Bootstrap的md断点，屏幕宽度<768px时生效） */
@media (max-width: 767px) {
  /* 当row的第一个列是文本列（包含htmlblock），把它的order设为2（排后面） */
  .row > .col-md-6:first-child:has(.htmlblock) {
    order: 2;
  }
  /* 对应的图片列设为order1（排前面） */
  .row > .col-md-6:last-child:has(.image-block) {
    order: 1;
  }

  /* 图片在前的row默认顺序已经符合要求，可选择性添加代码确保稳定性 */
  .row > .col-md-6:first-child:has(.image-block) {
    order: 1;
  }
  .row > .col-md-6:last-child:has(.htmlblock) {
    order: 2;
  }
}

方案二：兼容旧浏览器（给CMS加自定义类） #

如果需要兼容不支持:has()选择器的旧浏览器，建议让CMS在生成列的时候，根据内容顺序自动加自定义类：比如文本在前的列加text-first，对应的图片列加image-second；图片在前的列加image-first，对应的文本列加text-second。

修改后的HTML示例（CMS生成时自动添加类） #

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12 text-first">
      <div class="block htmlblock">
        <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 image-second">
      <div class="block image-block">
        <img src="https://dummyimage.com/600x400/000/fff">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12 image-first">
      <div class="block image-block">
        <img src="https://dummyimage.com/600x400/000/fff">
      </div>
    </div>
    <div class="col-md-6 col-sm-12 text-second">
      <div class="block htmlblock">
        <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-12 text-first">
      <div class="block htmlblock">
        <p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
      </div>
    </div>
    <div class="col-md-6 col-sm-12 image-second">
      <div class="block image-block">
        <img src="https://dummyimage.com/600x400/000/fff">
      </div>
    </div>
  </div>
</div>

对应的CSS代码 #

@media (max-width: 767px) {
  .text-first {
    order: 2; /* 文本列排后面 */
  }
  .image-second {
    order: 1; /* 图片列排前面 */
  }
  /* 图片在前的列保持默认顺序，可选择性明确规则 */
  .image-first {
    order: 1;
  }
  .text-second {
    order: 2;
  }
}

方案三：无法修改CMS？用JS动态补类 #

如果完全没法改动CMS的HTML输出，还可以用JavaScript给列动态添加类，实现兼容：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.row').forEach(row => {
    const firstCol = row.querySelector('.col-md-6:first-child');
    const lastCol = row.querySelector('.col-md-6:last-child');
    
    if (firstCol.querySelector('.htmlblock')) {
      firstCol.classList.add('text-first');
      lastCol.classList.add('image-second');
    } else {
      firstCol.classList.add('image-first');
      lastCol.classList.add('text-second');
    }
  });
});

然后搭配方案二的CSS代码就能生效。

原理说明 #

Flexbox的order属性默认值是0，数值越小的元素会越靠前排列。我们通过媒体查询，在移动端给图片列设置更小的order值，就能强制让它排在文本列上方，完美实现你要的移动端统一布局~

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