<article class="article">
<figure class="article__preview">
<img class="article__image">
</figure>
<div class="article__content">
...
</div>
<article>.article__preview, .article__content {
@include make-col-ready();
}
// в мобиле — в столбик (это можно опустить, в принципе)
.article__preview { @include make-col(12); }
.article__content { @include make-col(12); }
// если есть место — в колонки
@include media-breakpoint-up(md) {
.article__preview { @include make-col(2.5); }
.article__content { @include make-col($grid-columns - 2.5); }
}
// а на широком — картинку побольше
@include media-breakpoint-up(xl) {
.article__preview { @include make-col(3.5); }
.article__content { @include make-col($grid-columns - 3.5); }
}