如何使用Flexbox创建多行列响应式布局并保证移动端元素顺序正确

解决方案：使用CSS Grid实现（无需修改原有HTML结构） #

CSS Grid是二维布局方案，天然适配你需要的跨端布局需求，不需要额外嵌套容器，也不会打乱移动端的元素排列顺序：

代码实现 #

<!-- 保持你原有HTML结构不变 -->
<div class="container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
</div>

/* 移动端默认样式：单列垂直排列，完全遵循DOM本身的1、2、3顺序 */
.container {
  display: grid;
  gap: 10px; /* 元素间距按需调整 */
}
.box1, .box2, .box3 {
  padding: 20px;
  border: 1px solid #ccc;
}

/* 桌面端媒体查询，可根据需求调整触发宽度，示例为768px */
@media (min-width: 768px) {
  .container {
    /* 定义两列，比例按需调整，示例为左列占1份，右列占2份 */
    grid-template-columns: 1fr 2fr;
    /* 定义两行，高度由内容自动撑开 */
    grid-template-rows: auto auto;
  }
  /* 仅单独指定box2的位置：放在第二列，跨上下两行占满右列高度 */
  .box2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
}

方案优势 #

• 完全保留原有DOM结构，无需额外嵌套容器
• 移动端自然遵循DOM顺序1、2、3垂直排列，不需要额外设置
• 桌面端仅需要单独调整box2的网格位置，即可实现左列上下放box1、box3，右列放box2的布局

如果坚持使用Flex布局，也可以通过order属性实现，不需要嵌套容器：桌面端设置flex-wrap: wrap，给box2设置更高的order值调整到右侧位置即可，不过Flex是一维布局，需要额外控制容器高度，适配性不如Grid方案。

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