使用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>

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>

Answer 2

您可以在不更改结构的情况下做到这一点

@media only screen and (max-width: 640px) {
  #container {
     flex-direction: column-reverse;
  }
}

您可以将flex-direction设置为在带框的框中显示相反的结果。

编辑 因此，在解决混乱之后，这是我想到的至少可以紧密产生所需内容的方法。您需要将container的位置设置为相对位置，并将2nd box的位置设置为绝对位置，但这是一种很肮脏的方式。

body {}

#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;
}

@media only screen and (max-width: 640px) {
  #container {
    position: relative;
  }
  .box:nth-child(2) {
    width: 90%;
    position: absolute;
    bottom: -100px;
    left: -20px;
  }
}

<div id="container">

  <div class="column left">
    1
  </div>

  <div class="column right">

    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>

  </div>
</div>