Блог

Вот как это выглядит, когда у меня есть несколько карт друг под другом с помощью:

 <div class="row">
    <div class="col-md-6">
        stuff
    </div>
    <div class="col-md-6">stuff</div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>
  

Что я пропустил в CSS, чтобы они не выглядели так странно, а адаптировались?
Я хочу, чтобы они были выровнены следующим образом:

Я бы предложил следующее:

 .cards-container {
  column-count: 2;
}

.cards-container div {
   background: floralwhite;
   height: 50px;
   margin: 10px 0;

   // to avoid column breaks
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}

.cards-container div:first-child {
    margin: 0;
}  

 <div class="cards-container">
<div class="col-md-6">
    stuff
</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
</div>  

Пожалуйста, проверьте эту скрипку

Структура HTML:

 <div class="container">
<div class="row">
    <div class="col-xs-6 col">
        stuff
    </div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6">stuff</div>
</div>
  

 .row > div {
    background: lightgrey;
    border: 1px solid grey;
}

.col{
    height:100px;
}

.col.col1{
    height:50px;
}
  

PS: Вы можете заменить ‘xs’ на ‘md’ для рабочего стола.