如何在特定断点下使用Flex实现两列堆叠的特定布局？

我尝试用Flex在900px及以上断点实现特定网格布局（参考下图），但无法实现列的对齐与堆叠效果。

现有代码 #

CSS #

.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 32px 0;

  @media (min-width: 600px) {
    flex-wrap: nowrap;
  }
  
  @media (min-width: 900px) {
    flex-wrap: wrap;
    // 此处需要实现截图中的布局
  }
}

.box-1 {
  background-color: red;
  color: white;
  padding: 40px 32px;
  width: 100%;
}

.box-2 {
  width: 50%;
}

.box-3 {
  width: 50%;
  background: grey;
}

img {
  width: 100%;
  /* object-fit: contain; */
  height: 100%;
  transition: 0.3s;
  opacity: 0.9;
}

HTML #

<div class="wrapper">
  <div class="box-1">
    <h4>
      Title goes here
    </h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    </p>
  </div>

  <div class="box-2">
    <img src="https://www.audi.com/content/dam/gbp2/models/1920x1080-desktop-models-teaser-A211437.jpg?imwidth=1920&imdensity=1" />
  </div>

  <div class="box-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
    </p>
  </div>
</div>

解决方案 #

要实现截图中左列单个元素、右列两个元素上下堆叠的布局，有两种可行方案：

方案1：纯Flex实现 #

调整900px断点的CSS规则，利用列方向换行实现布局：

@media (min-width: 900px) {
  .wrapper {
    flex-wrap: wrap;
    flex-flow: column wrap;
    min-height: 600px; /* 根据内容高度调整，确保右列元素能触发换行 */
  }
  .box-1 {
    width: 50%;
    flex: 0 0 100%; /* 占满左列高度 */
  }
  .box-2, .box-3 {
    width: 50%;
    flex: 1 0 50%; /* 右列元素均分高度 */
  }
}

方案2：CSS Grid实现（更稳妥） #

改用Grid布局直接定义行列结构，无需依赖高度限制：

@media (min-width: 900px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .box-1 {
    grid-row: 1 / 3; /* 占据左列两行 */
  }
  .box-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .box-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
}

说明 #

• Flex方案适合内容高度相对可控的场景，通过列方向换行实现布局。
• Grid方案更直观，直接定义网格结构，是实现此类二维布局的最优选择。

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