display:flex元素排列顺序调整问题求助（媒体查询场景）

需要实现的布局效果：让3.1与2.3处于同一行，3.2和3.3保持原有布局。要求仅在媒体查询中实现该效果，且HTML结构保持不变。

当前代码 #

CSS代码 #

.test { display: flex; flex - direction: column; flex: 1; flex - wrap: wrap; }
.break { flex - basis: 100 %; height: 0; }
.b { width: 500 px; height: 50 px; border: 1 px solid red; flex - basis: 20 %; flex - wrap: nowrap; }
.flex1 { display: flex; flex - direction: row; }
.test2 { display: flex; flex - direction: column; flex - wrap: nowrap; }
.bb { display: flex; }
.flex2 { display: flex; flex - wrap: wrap; }
.flex3 { display: flex; flex - direction: row; flex - wrap: wrap; align - items: center; }

HTML代码 #

<div class="test"> 
  <div class="flex1"> 
    <div class="1 b">1</div> 
    <div class="2 b">1</div> 
  </div> 
  <div class="test2"> 
    <div class="flex2"> 
      <div class="3 b">2.1</div> 
      <div class="4 b">2.2</div> 
      <div class="break"></div> 
      <div class="5 b bb">2.3</div> 
    </div> 
    <div class="flex3"> 
      <div class="3 b bb">3.1</div> 
      <div class="break"></div> 
      <div class="4 b">3.2</div> 
      <div class="break"></div> 
      <div class="5 b">3.3</div> 
    </div> 
  </div> 
</div>

解决方案 #

以屏幕宽度≥768px为例，添加以下媒体查询代码即可实现需求：

@media (min-width: 768px) {
  /* 把test2改成横向排列，让flex2和flex3处于同一水平容器 */
  .test2 {
    flex-direction: row;
    align-items: flex-start;
  }
  /* flex2改为纵向排列，让2.1、2.2、2.3垂直占左侧区域 */
  .flex2 {
    flex-direction: column;
    flex: 1;
    flex-wrap: nowrap;
  }
  /* 隐藏flex2内的换行元素，避免2.3单独换行 */
  .flex2 .break {
    display: none;
  }
  /* 调整flex3布局，让3.1占右侧空间与2.3对齐，3.2、3.3维持原有换行逻辑 */
  .flex3 {
    flex: 1;
    flex-wrap: wrap;
  }
  /* 给3.1设置宽度，刚好和2.3处于同一行 */
  .flex3 .3.b.bb {
    flex-basis: calc(100% - 500px);
  }
  /* 保留3.2和3.3之间的换行 */
  .flex3 .break:nth-child(2) {
    flex-basis: 100%;
    height: 0;
  }
}

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