求助：使用Flexbox实现横竖屏模式下元素顺序切换

当前横屏布局代码 #

<div class="wrapper">
  <div class="column">
    <div id="1" class="one"></div>
    <div id="2" class="two"></div>
  </div>
  <div id="3" class="three"></div>
  <div id="4" class="four"></div>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

需求说明 #

现有布局中，包裹id为1、2的column容器限制了元素顺序调整，要求不重复任何div，仅通过Flexbox实现横竖屏布局切换。

解决方案 #

利用Flexbox的order属性结合媒体查询，无需修改HTML结构即可实现布局适配：

.wrapper {
  display: flex;
  flex-direction: row; /* 横屏默认横向排列 */
}

.column {
  display: flex;
  flex-direction: column; /* 横屏时1、2纵向堆叠 */
}

/* 竖屏适配（断点可根据实际需求调整） */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column; /* 整体改为纵向排列 */
  }

  .column {
    flex-direction: row; /* 1、2改为横向并排 */
    width: 100%;
  }

  /* 调整元素顺序匹配竖屏布局 */
  #3 {
    order: -1; /* 让元素3排在最顶部 */
  }

  .one, .two {
    flex: 1; /* 让1、2平分容器宽度 */
  }
}

原理说明 #

1. 横屏模式保持原有Flex配置，wrapper横向排列，column纵向堆叠1、2元素。
2. 进入竖屏时，通过媒体查询修改：
   • wrapper改为纵向排列，让所有元素按垂直方向布局
   • column改为横向排列，使1、2元素并排展示
   • 用order属性调整元素3的位置，让它优先显示在最上方
   • 给1、2设置flex:1，确保两者平分可用宽度

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