将 2 个弹性列合并为 1 个交替的子列

Answer 1

在下部宽度处使用

display: contents

“破坏”包装 div，然后在

order

上使用

.boxB

。

.flex-container {
  display: flex;
  gap: 10px;
  padding: 10px;
  max-width: 800px;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.left-column {
  flex: 2;
}

.right-column {
  flex: 1;
}

.box {
  border: 1px solid lightgrey;
  border-radius: 8px;
  padding: 8px;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .column {
    display: contents;
  }
  .boxB {
    order: 2;
  }
}

<div class="flex-container">
  <div class="column left-column">
    <div class="box boxA">Box A</div>
    <div class="box boxB">Box B</div>
  </div>
  <div class="column right-column">
    <div class="box boxC">Box C</div>
    <div class="box boxD">Box D</div>
    <div class="box boxE">Box E</div>
  </div>
</div>