宽度小于最大宽度时如何包装元素？

Question

我想显示two column的布局或two box in a row，当with大于600px时。但是，当宽度小于600时，应该显示1 below another或其他文字来包装box

这是我的代码

https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css:182-396

<div class="abc">
      <div class="card"></div>
      <div class="card"></div>
    </div>


.abc {
  display: flex;
  max-width: 600px;
  justify-content: space-around;
  flex-wrap: wrap;
  border: 2px dotted pink;
}
.card {
  padding: 100px;
  background-color: aqua;
  border: 2px solid;
  margin: 5px;
}

我的问题是，当宽度小于600时，它没有包装盒子。

Answer 1

您可以使用CSS Media Query来完成。像这样的东西。

@media only screen and (max-width: 600px) {
.abc {
  display: block;
 }
}

Answer 2

尝试一下：

DIV默认为block，以便保留卡display:inline-block;的大小。

.abc {
 display: flex;
 max-width: 600px;
 justify-content: space-around;
 flex-wrap: wrap;
 border: 2px dotted pink;
}
 .card {
  padding: 100px;
  background-color: aqua;
  border: 2px solid;
 margin: 5px;
 }

@media only screen and (max-width: 600px) {
 .abc {
  display: inline-block;
   }
  }

全屏环绕：