如何实现窄屏时两列文本按指定顺序折叠为单列？

问题描述 #

桌面端需要呈现两列成对排列的文本，布局如下：

Line 1   Line 2
Line 3   Line 4
Line 5   Line 6

当屏幕切换到移动端（窄屏）时，默认折叠效果会先显示左列所有内容再显示右列：

Line 1
Line 3
Line 5
Line 2
Line 4
Line 6

但需要实现的折叠效果是按行内顺序依次堆叠：

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

解决方案 #

方法1：CSS Grid布局（推荐） #

利用Grid的列定义和自动排列特性，直接实现符合需求的响应式切换，代码简洁易维护。

HTML结构

<div class="content-container">
  <div class="item">Line 1</div>
  <div class="item">Line 2</div>
  <div class="item">Line 3</div>
  <div class="item">Line 4</div>
  <div class="item">Line 5</div>
  <div class="item">Line 6</div>
</div>

CSS样式

/* 桌面端：两列等宽布局，元素按顺序自动填充 */
.content-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* 列间距可按需调整 */
}

/* 窄屏响应式调整：切换为单列布局 */
@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr;
  }
}

Grid会按照HTML元素的顺序，在桌面端自动排列为三行两列；窄屏时则按原顺序堆叠成单列，完全匹配需求。

方法2：Flexbox布局 #

借助Flex的换行特性，同样可以实现目标效果，适合习惯Flex布局的场景。

HTML结构

与方法1完全一致。

CSS样式

/* 桌面端：元素自动换行，每行两个 */
.content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex-basis: calc(50% - 0.5rem); /* 扣除一半间距，保证两列对齐 */
}

/* 窄屏响应式调整：元素占满整行，顺序堆叠 */
@media (max-width: 768px) {
  .item {
    flex-basis: 100%;
  }
}

方法3：分组容器布局 #

如果需要对每一行的成对元素添加独立样式（如边框、背景），可以采用分组容器的方式。

HTML结构

<div class="content-container">
  <div class="item-pair">
    <div>Line 1</div>
    <div>Line 2</div>
  </div>
  <div class="item-pair">
    <div>Line 3</div>
    <div>Line 4</div>
  </div>
  <div class="item-pair">
    <div>Line 5</div>
    <div>Line 6</div>
  </div>
</div>

CSS样式

/* 桌面端：每组内元素横向排列，形成一行两列的结构 */
.item-pair {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

/* 窄屏响应式调整：每组内元素纵向排列，整体按顺序堆叠 */
@media (max-width: 768px) {
  .item-pair {
    flex-direction: column;
  }
}

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