Добрый день у меня возникла проблема с блоками при адаптировании в bootstrap. Когда я использую class col-sm-6, то хотел бы что бы блоки шли в два ряда, у меня таких блоков 4 и у них разные размеры, первые два становятся нормально, но уже третий стает на место 4 блока, а 4 блок становится ниже картинка Вот код:
<div class="container">
<div class="row">
<div class="card-row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix">
<div class="card ">
<a href="#"><img src="images/layer-5.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 clearfix">
<div class="card ">
<a href="#"><img src="images/layer-6.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-3">
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-5.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 mod-col-4">
<div class="card ">
<a href="#"><img src="images/layer-8.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-6.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
<div class="card ">
<a href="#"><img src="images/layer-7.png"></a>
<div class="card-about">
<a href="#"><h3>Animation films</h3></a>
<i class="glyphicon glyphicon-map-marker"><span>Movies</span></i>
<p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
</div>
<hr>
<div class="social clearfix">
<ul class="rate">
<li class="star active"></li>
<li class="star active"></li>
<li class="star"></li>
<li class="star"></li>
</ul>
<a href="#"><img src="images/facebook.png"></a>
</div>
</div>
</div>
</div>
</div>
</div>
Может кто то знает решение данной проблемы?