Поясните принцип работы данного кода bootstrap?

Question

[nsonso]

В скачанном шаблоне, написанном на bootstrap, есть следующие строчки:

<div class="row client-logo">
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/1.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/2.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/3.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/4.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/5.png" alt=""></div>
      <div class="col-md-2 col-sm-4 col-xs-6"><img src="logo/6.png" alt=""></div>
</div>

Они работают отлично. Но! Разве в bootstrap каждая строка не должна содержать в себе именно 12 колонок? Почему тогда sm состоит из 24, а хs из 6? Я что-то неправильно понимаю в принципах работы bootrstrapa, но что?

Answer 1

[Abdula Magomedov]

Ты правильно понял. Одна строка это 12 колонок. Если сумма колонок превышает 12, последний переходит на новую строку

md - все 6 элементов в одну строку.
sm - по 3 элемента на строку, 2 строки получится.
xs - по 2 элемента на строку, 3 строки получится

Answer 2

[WQP]

Блоки которые не вмещаются в 12 колонок переносятся вниз. При этом сохраняют свою ширину