如何在移动端视口用CSS Grid将Div行展示为单列结构？

你的现有CSS未达预期，核心问题是仅给.wrapper .first添加display:flex无法改变整体布局——每个.wrapper都是独立的3列Grid，移动端下仍会保持横向排列，无法实现同类别元素的分组展示。

要实现目标效果，需调整父容器布局并利用order属性控制元素排序，具体代码修改如下：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 600px) {
  /* 将最外层容器设置为单列Grid */
  .main {
    display: grid;
    grid-template-columns: 1fr;
  }
  /* 让每个.wrapper内部元素纵向排列 */
  .wrapper {
    grid-template-columns: 1fr;
  }
  /* 用order属性指定元素排列优先级，实现同类别分组 */
  .first {
    order: 1;
  }
  .second {
    order: 2;
  }
  .third {
    order: 3;
  }
}

效果说明 #

• 桌面端：保持原有每行A B C的横向排列，符合预期。
• 移动端：所有.first（A）优先排列，接着是所有.second（B），最后是所有.third（C），呈现目标单列分组效果：

  A
  A
  A
  B
  B
  B
  C
  C
  C
  

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