使用@media查询堆叠div

Question

如何使用@media堆叠div，最大宽度为768px。

<div class="Container">
<div class="box"></div>
<div class="box"></div>
</div>

Answer 1

如果我正确理解OP，可以使用flexbox完成：

.Container {
  display: flex;
}

.box {
  flex-grow: 1;
}

@media (max-width: 768px) {
  .Container {
    flex-direction: column;
  }
}

Codepen

Answer 2

不使用flexbox（但是flex方式非常好）你也可以使用float：

＆＃13;

＆＃13;

.container::before,.container::after{
  content: " ";
  display:table;
}
.container::after{
  clear:both
}

.box{
  float:left;
  width:100px;
  height:100px;
  background:red;
  margin-left:2px;
}

@media screen and (max-width:768px){
  .box{
    float:none;
    margin-right:0;
    margin-bottom:2px
  }
}

＆＃13;

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;