如何实现交替排序的响应式双列网格布局？

针对你现有HTML结构不需要做任何修改，仅需新增以下CSS即可实现窄屏下的目标排序，原有宽屏交替布局不受任何影响：

/* 适配PureCSS的md断点，768px以下为窄屏 */
@media screen and (max-width: 767px) {
  .pure-g {
    display: flex;
    flex-direction: column;
  }
  /* 匹配所有需要后置的文本元素 */
  .pure-g article:nth-child(4n+1),
  .pure-g article:nth-child(4n+4) {
    order: 2;
  }
  /* 匹配所有需要前置的图片元素 */
  .pure-g article:nth-child(4n+2),
  .pure-g article:nth-child(4n+3) {
    order: 1;
  }
}

实现原理：利用flex布局的order属性仅在窄屏下重排元素顺序，每4个元素为一个交替周期，自动将每组的图片前置、文本后置，完全符合你要求的单列排序规则。

可以仅通过CSS实现，你只需要将HTML调整为语义化的图片→文本→图片→文本的自然顺序，后续新增内容也不需要手动调整排列，CSS会自动实现宽屏交替布局、窄屏保持语义顺序：

调整后的语义化HTML结构 #

<div class="alt-grid">
  <article>Image for Text 1</article>
  <article>Text 1</article>
  <article>Image for Text 2</article>
  <article>Text 2</article>
  <article>Image for Text 3</article>
  <article>Text 3</article>
  <!-- 后续直接按「图片+文本」的顺序添加即可 -->
</div>

对应CSS代码 #

/* 默认窄屏单列布局，直接保留HTML语义顺序 */
.alt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 宽屏两列交替布局 */
@media screen and (min-width: 768px) {
  .alt-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* 奇数行：文本居左、图片居右 */
  .alt-grid article:nth-child(4n + 1) {
    grid-column: 2;
  }
  .alt-grid article:nth-child(4n + 2) {
    grid-column: 1;
    grid-row: auto;
  }
  /* 偶数行：图片居左、文本居右，默认按HTML顺序排列即可 */
}

实现原理：利用CSS Grid的grid-column属性手动控制宽屏下元素的所在列，每4个元素为一个周期自动切换排列顺序，HTML完全保留语义化的图片在前逻辑，不需要额外做结构调整。

内容的提问来源于stack exchange，提问作者Motiejus Jakštys