Can you explain how this bootstrap code works?

Question

HTML

The downloaded template, written in bootstrap, contains the following lines:

<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>

They work great. But! Shouldn't bootstrap have exactly 12 columns per row? Why then sm consists of 24, and xs of 6? I misunderstand something in the principles of how bootstrap works, but what?

Answer 1

You understood correctly. One line is 12 columns. If the sum of the columns exceeds 12, the last one goes to a new line
md - all 6 elements in one line.
sm - 3 elements per line, 2 lines will work.
xs - 2 elements per line, 3 lines will be

Answer 2

Blocks that do not fit into 12 columns are moved down. while maintaining their width.