The block of logos does not adapt to the phone, why?

Question

css

The problem is this, I have 8 svg logos, I use bootstrap 4 and everything is in one line (and the line is in the container, and it is in the section, that is, everything seems to be according to the rules)
On the desktop they are:
3 3 3 3
3 3 3 3
On the tablet like this:
4 4 4
4 4 4
And on the phone they should:
6 6
6 6
But it doesn’t work out to adapt to the xs-resolution!
I twisted the code as much as I could, the solution is still not found :(

The code itself for example:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
        <div class="logo1"></div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
        <div class="logo2"></div>
      </div>
       /*и так же ещё 3 раза; logo(3,4,5,....)*/
  </div>
</div>

.logo1{
  background: url(../image.svg) no-repeat center;
    height: 40px;
    width: 120px;
}
.logo2{
/*другой юрл*/
}

These are screenshots of how it breaks on the phone:
For computers
For tablets
For phones

The same problem is elsewhere, and the elements on the phone also do not adapt

Thank you!

Answer 1

Bootstrap doesn't have XS, that's the default. Plus, it makes no sense to specify col-md-4 and col-sm-4, Bootstrap is processed from a smaller resolution to a larger one, so the rules there are not "From and TO", but only "from".
i.e.
.col- <576px
.col-sm- ≥576px
.col-md- ≥768px
.col-lg- ≥992px
.col-xl- ≥1200px
and since in CSS if there are multiple rules for one component, those that apply written last, then .col-sm- will override .col-, .col-md- will override .col-sm- and so on
, fix it, and unsubscribe
<div class=" col-6 col-sm-4 col-lg-3">