Как изменить положение блока bootstrap?

Добрый день у меня возникла проблема с блоками при адаптировании в 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>

Может кто то знает решение данной проблемы?