html - 如何使用 CSS 将 4 个 div 中的 3 个从一列移动到新列中？

Question

首先，这是想要的效果:

无需重新排序 div 的布局:

重新排序 div 后的布局

2 是固定宽度。 1,3,4 都是可伸缩的，可以是任意宽度。

我试过使用 flexboxes，但它们在重新排序后不会以 2 列布局。

.container { display: flex; flex-wrap: wrap; width: 700px; }
.d1 {
  order: 2;
  background-color: red;
}
.d2 {
 order: 1;
 background-color: yellow;
 }
 .d3 {
 order: 3;
 background-color: blue;
 }
 .d4 {
 order: 4;
 background-color: green;
 }
 
 .d1,.d2,.d3,.d4 {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid black;
  width: 300px;
  height: 50px;
  }
  
  .d2 {
   height: 200px;
   }

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
 </div>

我也试过向左浮动 2，但它不会使 1、3 和 4 占据容器的所有剩余可用空间。 (它需要在任何容器宽度下这样做)

.container { position: relative; width: 900px; border: 1px solid black; }
.d1 {
float: right;
  background-color: red;
}
.d2 {
 float: left;
 background-color: yellow;
 }
 .d3 {
 float: right;
 background-color: blue;
 }
 .d4 {
 float: right;
 background-color: green;
 }
 
 .d1,.d2,.d3,.d4 {
  padding: 20px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid black;
  width: 300px;
  height: 50px;
  }
  
  .d2 {
   height: 200px;
   }

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
 </div>

我忘了提到所有这些都在另一个容器中，该容器需要具有其内容的高度

Answer 1

外箱(要求)

总高度 应小于 1st div 和 2nd div 的高度。

原因:flex-wrap 将提供所需的输出

* {
  margin: 0;
}

.outer {
  height: 60vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.two {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  color: white;
  height: 16vh;
  background: red;
}

.one {
  margin: 0 auto;
  width: 400px;
  text-align: center;
  font-size: 50px;
  line-height: 50vh;
  color: white;
  height: 50vh;
  background: green;
}

.three {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 20vh;
  color: white;
  height: 20vh;
  background: orange;
}

.four {
  width: calc(100vw - 400px);
  text-align: center;
  font-size: 50px;
  line-height: 100px;
  color: white;
  height: 23vh;
  background: black;
}

@media only screen and (max-width: 601px) {
  .outer {
    height: 150vh;
  }
  .one {
    order: 2;
    width: 100vw;
  }
  .two {
    order: 1;
    width: 100vw;
  }
  .three {
    order: 3;
    width: 100vw;
  }
  .four {
    order: 4;
    width: 100vw;
  }
}

<div class="outer">
  <div class="one">2</div>
  <div class="two">1</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>