как обернуть элемент, когда ширина меньше максимальной ширины?

Question

Я хочу показать two column макет или two box in a row, когда значение больше чем 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

Попробуйте:

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

Полноэкранный режим:

Answer 2

вы можете сделать это, используя CSS Media Query. как то так.

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