Why are bootstrap's less mixins not working correctly?

Question

css

Good day to all!
Good people from the toaster told me how to use bootstrap when developing a responsive site, without adding a bunch of classes to html( Is it possible to develop a site responsively without using a lot of classes? ) (thanks to them :) ). This is possible with preprocessors using mixins. But when I started testing this method, I ran into a problem that I can not solve for several hours.
Actually the essence of the problem:
There is a bootstrap.less file
There is my main.less file (in which it is imported @import (reference)"less/bootstrap.less";)
When adding a class to html, for example "col-xs-2", the columns are displayed normally

But when adding an impurity to main.less, it is displayed like this

Code example

@import (reference)"less/bootstrap.less";
.container{
  background: #ccc;
  .article-row{
    .row;
    .article{
      .col-xs-2;
   // причём если сюда добавить ещё .col-md-2; то при компиляции вылазит ошибка
      background: blue;
      border: 1px solid #222;
      height: 200px;
    }
  }
}

I noticed when comparing that for some reason there is no float: left;. But as mixing can affect properties, I just mix it in main.less without changing anything.
In theory, everything should work the way it works when I add this class to html. But no... And besides, I cannot add two classes to the mix. In this case, I will not be able to configure the adaptation.
Comrades professionals, tell me what I'm doing wrong? And how to mix in several classes of the bootstrap grid so that there are no errors?
Thanks in advance for your reply.

Answer 1

Remember about important.

Answer 2

Columns are made by mixins

.make-xs-column();
.make-md-column();
.make-lg-column();

why is col-xs-2 here? See less bootstrap files, everything is clearly written there.