В некоторых ситуациях ряд колонок не помещается в отведенное для них место на экране. Адаптивные классы используются для превращения каждой колонки общего ряда - в свой собственный ряд.
Например, если Вы хотите сгруппировать ряд колонок в ситуации, когда место для контента слишком мало, следует применить класс .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 для создания собственных классов.