What is happening to my grid system? Bootstrap

Question

Why are my pictures lining up strangely at col-sm-6? I understand that at that point each row should two pictures in a row. However, they are stacking strangely and I am left with two pictures in one row and a row of one picture below that. What am I doing wrong?

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4" >
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
  </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img src="img/moss.jpg" class="img-responsive">
    </div>
  </div>
</div>
</section>
</div>

I need every row to have two pictures on at col-sm-6

Answer 1

No need to repeat row class

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4" >
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>

        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img src="img/moss.jpg" class="img-responsive">
        </div>
    </div>
</div> 

Answer 2

In Bootstrap col-sm-6 has 50% width & col-sm-4 has 33.33% width so that you need to used col-sm-4 if you want three image per row.

 .img-responsive { margin-bottom: 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4" > <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> <div class="col-xs-12 col-sm-4"> <img src="https://www.phoronix.com/assets/categories/linuxgaming.jpg" class="img-responsive"> </div> </div> </div> 

Answer 3

The row class starts a new row block where columns are laid out one after another. In order to display grid view you should place all items in a single row.

In your broken case each row contains up to 3 columns - that is why the third item has no sibling as the next row is rendered underneath.

Please see following snippet (expand it to see media queries in action):

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> </div> </div> 

Another example using col-xs-12 col-sm-6 col-md-3 col-lg-2 Bootrap's grid system :

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"> <img src="https://placebear.com/640/450" class="img-responsive"> </div> </div> </div>