Bootstrap CSS class .card-columns

<div class="card-columns">
  <div class="card">
    <div class="card-body">
      <!-- Card content -->
    </div>
  </div>
  <div class="card p-3">
    <!-- Card content -->
  </div>
  <div class="card">
    <div class="card-body">
      <!-- Card content -->
    </div>
  </div>
  <div class="card bg-primary p-3 text-center">
      <!-- Card content -->
  </div>
</div>

/* _card.scss:256 */
.card-columns {
  .card {
    margin-bottom: $card-columns-margin;
  }

  @include media-breakpoint-up(sm) {
    column-count: $card-columns-count;
    column-gap: $card-columns-gap;
    orphans: 1;
    widows: 1;

    .card {
      display: inline-block; // Don't let them vertically span multiple columns
      width: 100%; // Don't let their width change
    }
  }
}