В некоторых ситуациях ряд колонок не помещается в отведенное для них место на экране. Адаптивные классы используются для превращения каждой колонки общего ряда - в свой собственный ряд.
Например, если Вы хотите сгруппировать ряд колонок в ситуации, когда место для контента слишком мало, следует применить класс .responsive-sm
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsive Class | Break when roughly |
---|---|
.responsive-sm | Smaller than landscape phone |
.responsive-md | Smaller than portrait tablet |
.responsive-lg | Smaller than landscape tablet |
Каждый класс использует переменную SaaS, которую можно изменить по своему усмотрению. Вы также можете использовать responsive-grid-break
для создания собственных классов.