I can't get the bootstrap grid to adapt properly to mobile and tablet devices in a particular block. What's the matter?

Question

HTML

Elementary apparently, but I can not. Maybe I'm writing some heresy, but still what's the problem? There is a block with logos. For large screens, I divided the width into 6 equal parts. Now I want smartphones and tablets to have two rows of three logos each. How to achieve this? What classes to add?

<div class="jumbotron our-customers">
      <div class="container"> 
        <div class="col-md-12"><h2> Our customers</h2></div> 
        <div class="container">
        <div class="row">
          <div class="col-md-2 col-sm-4"><img src="img/logo-1.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-2.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-3.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-4.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-5.png" alt="#"></div>
          <div class="col-md-2 col-sm-4"><img src="img/logo-6.png" alt="#"></div>
        </div> 
        </div>
      </div> 
    </div>

It looks like this

Answer 1

Do not use col without row, at any resolution, the number of blocks in all columns in one row must be 12.