В некоторых ситуациях ряд колонок не помещается в отведенное для них место на экране. Адаптивные классы используются для превращения каждой колонки общего ряда - в свой собственный ряд.

Например, если Вы хотите сгруппировать ряд колонок в ситуации, когда место для контента слишком мало, следует применить класс .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 ClassBreak when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet

Каждый класс использует переменную SaaS, которую можно изменить по своему усмотрению. Вы также можете использовать responsive-grid-break для создания собственных классов.