如何使用Flex布局调整列位置：将第三列移至第一列下方

问题分析 #

你当前的Flex代码会让.col1和.col2占满一行，.col3单独在下一行占50%宽度，无法实现右侧.col2和.col3上下排列的效果。要达成目标布局，有两种可行方案：

方案一：Flex嵌套容器（纯Flex实现） #

把右侧的两个文本容器放到一个子容器里，让这个子容器和左侧图片容器平分宽度，子容器内部用垂直Flex布局让两个文本块平分高度：

.container {
  display: flex;
  flex-wrap: wrap;
}
.col1 {
  width: 50%;
  background-color: #ccc;
  align-self: stretch; /* 让左侧容器高度和右侧保持一致 */
}
.right-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.col2, .col3 {
  flex: 1; /* 平分右侧容器的高度 */
}
.col2 {
  background-color: red;
}
.col3 {
  background-color: yellow;
}

/* 移动端适配 */
@media screen and (max-width: 1024px) {
  .col1, .right-wrapper {
    width: 100%;
  }
}

修改后的HTML：

<div class="container">
  <div class="col1">Content = image</div>
  <div class="right-wrapper">
    <div class="col2">Content = text</div>
    <div class="col3">Content = text</div>
  </div>
</div>

方案二：Grid布局（更简洁） #

如果不限制必须用Flex，Grid布局能更直接实现需求，无需修改HTML结构：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  grid-template-rows: 1fr 1fr; /* 两行等高 */
}
.col1 {
  grid-row: span 2; /* 左侧容器占满两行高度 */
  background-color: #ccc;
}
.col2 {
  background-color: red;
}
.col3 {
  background-color: yellow;
}

/* 移动端适配 */
@media screen and (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .col1 {
    grid-row: span 1; /* 移动端左侧只占一行 */
  }
}

HTML保持你原来的结构即可。

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