Как разместить два блока рядом, но чтобы при уменьшении размера страницы они становились друг под друга?

Question

Как разместить два блока рядом, и чтобы, при уменьшении размера страницы, они становились друг под друга?

.Prokrutka {
  margin-left: 15px;
  max-width: 35%;
  height: 400px; /* высота  блока */
  width: 35%; /* ширина  блока */
  background: #fff; /* цвет фона, белый */
  border: 1px solid #C1C1C1; /* размер и цвет границы блока */
  overflow-x: scroll; /* прокрутка по горизонтали */
  overflow-y: scroll; /* прокрутка по вертикали */
  padding-left: 15px;
  display: flex;
  flex-wrap: wrap;
}

.Prokrutka_out {
  margin-left: 15px;
  max-width: 20%;
  height: 400px; /* высота  блока */
  width: 20%; /* ширина  блока */
  background: #fff; /* цвет фона, белый */
  border: 1px solid #C1C1C1; /* размер и цвет границы блока */
  overflow-x: scroll; /* прокрутка по горизонтали */
  overflow-y: scroll; /* прокрутка по вертикали */
  padding-left: 15px;
}

<div class="Prokrutka">
  <div id="aviable">
    <div id="checkGroup21"><label class="box-label"><input type="checkbox" id="op15" onchange="Options()" data-num="Экспедирование"> Экспедирование</label></div>
    <div id="checkGroup22"><label class="box-label"><input type="checkbox" id="op16" onchange="Options()" data-num="Региональные перевозки"> Региональные перевозки</label></div>
    <div id="checkGroup23"><label class="box-label"><input type="checkbox" id="op17" onchange="Options()" data-num="Экспресс-доставка почтовыми вагонами"> Экспресс-доставка почтовыми вагонами</label></div>
    <div id="checkGroup24"><label class="box-label"><input type="checkbox" id="op18" onchange="Options()" data-num="От двери до двери"> От двери до двери</label></div>
  </div>
</div>

<div class="Prokrutka">
  <div id="selected"> Вы выбрали: </div>
</div>

Уже кучу всего перепробовал, постоянно ломается структура, не понимаю как это можно сделать...

Answer 1

.container {
  display: flex;
  justify-content: center;
}

.Prokrutka,
.Prokrutka_out {
  flex: 0 1 auto;
}

.Prokrutka {
  margin-left: 15px;
  max-width: 35%;
  height: 400px;
  /* высота  блока */
  width: 35%;
  /* ширина  блока */
  background: #fff;
  /* цвет фона, белый */
  border: 1px solid #C1C1C1;
  /* размер и цвет границы блока */
  overflow-x: scroll;
  /* прокрутка по горизонтали */
  overflow-y: scroll;
  /* прокрутка по вертикали */
  padding-left: 15px;
}

.Prokrutka_out {
  margin-left: 15px;
  max-width: 20%;
  height: 400px;
  /* высота  блока */
  width: 20%;
  /* ширина  блока */
  background: #fff;
  /* цвет фона, белый */
  border: 1px solid #C1C1C1;
  /* размер и цвет границы блока */
  overflow-x: scroll;
  /* прокрутка по горизонтали */
  overflow-y: scroll;
  /* прокрутка по вертикали */
  padding-left: 15px;
}

@media screen and (max-width: 800px) {
  .container {
    flex-flow: column nowrap;
  }
  .Prokrutka,
  .Prokrutka_out {
    align-self: center;
    max-width: 100%;
    width: 90%;
    height: auto;
    padding: 10px;
  }
}

<div class="container">

  <div class="Prokrutka">
    <div id="aviable">
      <div id="checkGroup21"><label class="box-label"><input type="checkbox" id="op15" onchange="Options()" data-num="Экспедирование"> Экспедирование</label></div>
      <div id="checkGroup22"><label class="box-label"><input type="checkbox" id="op16" onchange="Options()" data-num="Региональные перевозки"> Региональные перевозки</label></div>
      <div id="checkGroup23"><label class="box-label"><input type="checkbox" id="op17" onchange="Options()" data-num="Экспресс-доставка почтовыми вагонами"> Экспресс-доставка почтовыми вагонами</label></div>
      <div id="checkGroup24"><label class="box-label"><input type="checkbox" id="op18" onchange="Options()" data-num="От двери до двери"> От двери до двери</label></div>
    </div>
  </div>

  <div class="Prokrutka">
    <div id="selected"> Вы выбрали:
    </div>
  </div>

</div>

БЛОГ НА HUSL

Как разместить два блока рядом, но чтобы при уменьшении размера страницы они становились друг под друга?

Ответы (1 шт):