html - 使用 flex 更改块顺序

Question

如何做这种标记？因此，当分辨率低于 640 像素时，容器编号 2 将移至底部。

我知道我应该使用@media (max-width:600px) {} ，但我真的不明白如何将块 #2 从“右列”移到底部

谢谢

我的示例小提琴是https://jsfiddle.net/benderlio/tewzvLxf/3/

#container {
  display: flex;
}

.column.left {
  width: 60%;
  flex: 0 0 1;
  background-color: red;
}

.column.right {
  padding-top: 30px;
  text-align: center;
  width: 40%;
  flex: 0 0 1;
}

.box {
  border: 1px solid red;
  margin: 20px;
  padding: 20px;
}

<div id="container">
  <div class="column left">
    
  </div>

  <div class="column right">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</div>

标签： htmlcssflexbox

Answer 1

我会使用带有媒体查询的网格并删除列 div：

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "a c"
    "a d";
}

.box {
  border: 1px solid red;
  margin: 20px;
  padding: 20px;
}

.box1 {
  grid-area: a;
}

.box2 {
  grid-area: b;
}

.box3 {
  grid-area: c;
}

.box4 {
  grid-area: d;
}

@media (max-width:640px) {
  /* adding the commented out areas will allow box1 to keep it's height like in your images so there is a space below box 4 */
  #container {
    /* grid-template-rows: 1fr 1fr  1fr; */
    grid-template-areas:
      "a b"
      "a d"
      /* "a ." */
      "c c";
  }
}

<div id="container">

   <div class="box box1">
     1
   </div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>
   <div class="box box4">4</div>

 </div>