Как можно коректно разместить элементы cards на странице используя bootstrap4.1?

Question

[Шамуэй]

Мне нужно сделать на странице несколько элементов cards.
Я сделал это так

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card">
            <!-- BODY CARDS
        </div>
    </div>
</div>

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


Как можно сделать чтобы карточки на странице выглядели так?

Answer 1

[Stalker_RED]

masonry и аналоги.

Answer 2

[Andrew]

оберните каждую колонку в div, а не каждый кард.

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>

Comments

[Шамуэй]

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


Как можно сделать чтобы 2 последние карточки тоже были в линию?

[Andrew]

Хомон,
У вас для -md и -sm была 6 = половине(по дефолту), для трети - 12/3 = 4

<div class="col-xs-12 col-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>
<div class="col-xs-12 col-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>
<div class="col-xs-12 col-4">
        <div class="card"></div>
        <div class="card"></div>
    </div>

Answer 3

[Шамуэй]

<div class="card-columns">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

@media only screen and (max-width: 995px) {
    .card-columns {
        column-count: 2;
    }
}
@media only screen and (max-width: 580px) {
    .card-columns {
        column-count: 1;
    }
}