Bootstrap Columns Вертикальная укладка

Question

В своем разделе постов на веб-сайте, который я создаю, у меня есть 4 столбца с постами в каждом посте разной высоты, в зависимости от их содержимого.начальная система 4 сетки.В соответствии с фотографией в разделе

При изменении размера 4-й колонки переупорядочить.

Как вы можете видеть на изображении выше, 4-й столбец смещен под номером 1, но его выравнивание основано на высоте 3-го столбца.Я хочу, чтобы меня складывали, как на фото ниже.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
    <div class="post-container">
      <div class="post-image"> </div>
      <div class="post-title">TEST2016</div>
      <div class="post-share-icons"></div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
      <div class="post-container">
        <div class="post-image"> </div>
        <div class="post-title">TEST2016</div>
        <div class="post-share-icons"></div>

      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
        <div class="post-container">
          <div class="post-image"> </div>
          <div class="post-title">TEST2016</div>
          <div class="post-share-icons"></div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
          <div class="post-container">
            <div class="post-image"> </div>
            <div class="post-title">TEST2016</div>
            <div class="post-share-icons"></div>

          </div>
        </div>

Итак, вопрос в том, как добиться такого форматирования CSS с помощью Bootstrap или без bootstrap.Я попытался поместить «float» с помощью «flex wrap» и «clearfix» безрезультатно.

Answer 1

Bootstrap имеет встроенную утилиту, для этой задачи вы можете использовать карты и оборачивать их в столбцы карт.Смотри документацию здесь

Answer 2

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

Вы можете использовать что-то вроде Masonary , которое, как я считаю, рассчитывается сверху и слева.позиции по мере изменения размера.Или я думаю, что вы можете использовать flex и множество div-ов-оболочек, но это станет грязным и будет ужасным обслуживанием.Это настолько грязно, что я никогда не запускал его в производство, потому что я потерял рассудок, пытаясь, или ненавидел мысль о его сохранении, когда он работал в небольшом примере.

Masonary допускает довольно простую компоновку

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

Пример JSFiddle