Masonry-like with Bootstrap 4

Alternately layout with 2 columns and re-ordering when needed.

by otinanaipali

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="card-columns">
  <div class="card ">
    <img src="http://lorempixel.com/200/400/" class="card-img-top" alt="...">
  </div>
  <div class="card my-5 ">
    Text 1 here
  </div>
  <div class="card my-5 ord-2">
    Text 2 here
  </div>
  <div class="card ord-1">
    <img src="http://lorempixel.com/200/410/" class="card-img-top" alt="...">
  </div>
</div>

CSS

.card-columns {
  column-count: 2;

}

@media (max-width:575px) {
  .card-columns {
    column-count: 1;
    display: flex;
    flex-flow: row wrap;
  }
  .card{
    width:100%;
  }

  .ord-1 {
    order: 1;
  }

  .ord-2 {
    order: 2;
  }
}