Flexbox - 如何更改列的顺序？

Question

我想知道如何获得与图片相同的效果。我在很多方面都尝试过......不成功。

我尝试设置一个包含四列的弹箱，其中左列的大小相同。中间栏填充剩余的空间。

我想要的效果，

代码如下：

＆＃13;

＆＃13;

.container {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.box-a {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-b {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-c {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-d {
  background: green;
  height: 800px;
  width: 600px;
  margin: 10px;
}

＆＃13;

<div class="container">
  <div class="sidebar">
    <div class="box-a"></div>
    <div class="box-b"></div>
    <div class="box-c"></div>
  </div>
  <div class="box-d"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用订单属性：

尝试下面的代码和媒体查询。您可以通过浏览器调整大小来查看输出。

＆＃13;

＆＃13;

.container {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.box-a {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-b {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-c {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-a, .box-b, .box-c {
    padding: 20px 0;
}

.box-d {
  background: green;
  height: 800px;
  width: 600px;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px 0;
}
@media only screen and (max-width: 900px) {
  .container {
    display: flex;
    float: left;
    width: 100%;
    flex-direction: column;
}
  .sidebar {
    order: 2;
    display: inline-block;
    flex-direction: column;
    float: left;
    width: 100%;
  }
  .box-a {
    float: left;
    width: 95%;
}
.box-b, .box-c {
    float: left;
    width: 46%;
}
  .box-d {
    order: 1;
    float: left;
    width: 95%;
  }
}

@media only screen and (max-width: 700px) {

.box-b, .box-c {
    float: left;
    width: 95%;
}
}

＆＃13;

<div class="container">
  <div class="sidebar">
    <div class="box-a">box1</div>
    <div class="box-b">box2</div>
    <div class="box-c">box3</div>
  </div>
  <div class="box-d">box4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用下面的媒体查询。

.container {
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.box-a {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-b {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-c {
  background: yellow;
  height: 200px;
  width: 200px;
  margin: 10px;
}

.box-d {
  background: green;
  height: 800px;
  width: 600px;
  margin: 10px;
}

@media screen and (max-width: 900px) {
  .container {
    flex-direction: column;
  }
  .box-d {
    order: 1;
  }
  .sidebar {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .box-c {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  }
  .box-d {
    order: 1;
  }
  .sidebar {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .box-a, .box-b, .box-c {
    width: 100%;
  }
}

<div class="container">
  <div class="sidebar">
    <div class="box-a"></div>
    <div class="box-b"></div>
    <div class="box-c"></div>
  </div>
  <div class="box-d"></div>
</div>