How does adding multiple classes for columns work? Why are there more than 12?

Question

css

Sorry for the noob questions.
In the examples at site this code:

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

And immediately two incomprehensible moments.
First, why col-xs-12 and col-xs-6? Together, you get 18 columns. And everywhere it is written that it works on the principle of 12 columns.
Secondly, how does this "col-xs-12 col-md-8" class stacking work? How can these properties be set at the same time?
Comments to the code do not explain anything at all:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->

It turns out that Bootstrap feeds mobile devices one class, and desktops another class? Does it happen like that?

Answer 1

Look at the bootstrap documentation, it clearly states that xs md sm lg are classes for different display widths. Respectively
I will form the width of the block in accordance with the current screen width.
And this design will make one block 12 columns wide, and the second block below it 6 columns wide.

<div class="col-xs-12">
  <div class="col-xs-6">

Answer 2

Look, xs - extra small devices, sm - small, md - medium, lg - large, so when you set md and xs - md will always work, until the screen size becomes extra ss - 768 (sort of like in bootstrap), it turns out that in your example

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

the first block will occupy 8 columns, the second - 4 respectively, as soon as the screen size becomes 768px - the first block will occupy the entire width - 12 columns, and the second will take up the bottom and occupy the half of the screen - 6 columns. If the following blocks do not fit in a row of 12 in columns, they are transferred to the next one and pressed against the left side, because have float" left
ps if you have the same structure as in the example below, and you want the block to occupy the entire width on small devices, it is not necessary to set col-xs-12, it turns out that you will apply the col-sm- rule before sm 6, and after automatically col-xs-12
for clarity, the code:

<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>
<div class="col-sm-6 portfolio__item">
...
</div>

And it looks like this:
On large devices
On small devices