如何用CSS在移动端视口将Grid布局的行转换为列？

当前移动端CSS仅修改了.first的显示方式，无法跨.wrapper容器重组元素顺序。要实现所有A、B、C分别分组垂直排列的效果，可通过以下CSS调整：

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

@media only screen and (max-width: 600px) {
  .main {
    display: grid;
    grid-template-columns: 1fr;
  }
  .wrapper {
    display: contents; /* 移除wrapper的容器身份，子元素直接归属.main */
  }
  .first {
    order: 1; /* 所有.first元素排在最前 */
  }
  .second {
    order: 2; /* 所有.second元素排在中间 */
  }
  .third {
    order: 3; /* 所有.third元素排在最后 */
  }
}

原理说明 #

1. display: contents：让.wrapper不再作为独立容器存在，其内部的.first/.second/.third会直接成为.main的子元素，这样就能跨原有的行容器统一控制元素顺序。
2. 单列Grid布局：.main设置为单列Grid，确保每个元素单独占据一行。
3. order属性排序：给不同类别的元素设置排序优先级，让所有A、B、C分别归组排列，最终实现你要的移动端效果。

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