Incorrect positioning between LG and MD

Question

Please take a look at https://mgumerov.github.io/jquery/test.html (there will be some queries https->http, don't you be scared by it)

In a thumbnails view mode, each tile is declared with col-sm-4 col-md-3 col-lg-2, and most of the time and with most window sizes it behaves well. However there are some window sizes which break the layout:

But still that depends on a specific page, I mean, page 1 can get ruined but page 2 will be OK.

So I wonder 1) why the supplied styles do not work as expected and 2) how do I fix that?

Answer 1

Ok, It's a clearfix question :

Please look at the doc : http://getbootstrap.com/css/#grid-responsive-resets

Look at this : http://www.bootply.com/uTgFw9yoTG

This will appear with bad effect

<div class="container">
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
</div>

This will be good:

<div class="container bis">
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
  <div class="clearfix visible-md"></div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>  
  <div class="clearfix visible-lg"></div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
   <div class="col-xs-12 col-md-4 col-lg-3">col</div>
</div>

You have to set a clearfix at every 12 col.

In this exemple, you have to add a clearfix visible only on md every 3 div. (md-4 x 3 = 12)

And add a clearfix visible only on lg every 4 div (lg-3 x 4 = 12).