же высота строк в макете 2 колонки

Question

Я хочу, чтобы расположение 2 колонки, как это:

Как вы можете видеть, каждый «строка» имеет такую ​​же высоту, что и другие. Я пытаюсь закодировать это, но без везения. Я попробовал бутстрап, который работает, но он не реагирует (второй столбец не идет ниже первого, очевидно).

Я хочу, чтобы вести себя так:

Тогда я попытался установить высоту каждой части с помощью JavaScript, который работал, но высота остается неизменной даже после изменения ширины мобильного устройства и я действительно ненавижу этот метод.

Есть ли нормальный/простой способ сделать это?

Answer 1

Для этого можно использовать display:flex.

Чтобы сделать это так, чтобы колонны идут друг под другом, когда на экране изменяется, использовать средства массовой информации запросов Query

См пример фрагмент кода ниже или This JSFIDDLE, чтобы увидеть, как работает отзывчивость

.flexbox-container { 
 
    display: -ms-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.flexbox-container > div { 
 
    width: 50%; 
 
    padding: 10px; 
 
    border: 1px solid green; 
 
    height: 300px; 
 
} 
 
.flexbox-container > div:first-child { 
 
    margin-right: 1px; 
 
} 
 

 
.flexbox-container2 > div { 
 
    height:100px; 
 
} 
 
@media screen and (max-width:767px){ 
 
.flexbox-container{display:block;} 
 
}

<div class="flexbox-container flexbox-container2"> 
 
    <div> 
 
    <h3>Row 1 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 1 - Column 2</h3> 
 
    </div> 
 
</div> 
 
<div class="flexbox-container"> 
 
    <div> 
 
    <h3>Row 2 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 2 - Column 2</h3> 
 
    </div> 
 
</div> 
 
<div class="flexbox-container flexbox-container2"> 
 
    <div> 
 
    <h3>Row 3 - Column 1</h3> 
 
    </div> 
 
    <div> 
 
    <h3>Row 3 - Column 2</h3> 
 
    </div> 
 
</div>