HTML 5 Bootstrap System Grid

Question

I need to do with the grid system if possible the image example:

In the example above, I only need the formatting, where each event is a 'div' with a dynamic size, and the bottom one glues to the top one as shown in the example. I tried to use the code below to arrive as in the example, but when it reaches the 'col-12' it breaks the line and everything is 'straight' in the same line, becoming disproportionate, that is, if in the example below, every 4 events, would all be in a straight line.

Below is the code I tried to use to get to the example below:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Thanks for the help.

Answer 1

Use the plugin Jquery.Sotope:

$(document).ready(function()
{	
  $('.grid').isotope({
  	itemSelector: '.rows',
        sortBy : 'original-order'
  });
});

.rows {
  margin: 2px 2px 2px 2px;
  width: 192px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.js"></script>


<div class="grid">
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>   
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>  
   <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div> 
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>
</div>

The classes of bootstrap-3 should be removed, the Jquery.Sotope will make this role even when decreasing or increasing the page.