I have a Bootstrap grid with 6 items, I need them aligned.
For most resolutions they look good, but when the screen resolution is 991px - 1200px, the items on the grid stop being aligned:
.
My HTML code:
<div class="container">
<section class="row no-pad">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<i class="fa fa-usd"></i>
<div class="caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/abtesting.png">
<div class="caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/roi.png">
<div class="caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/crm-remarketing.png">
<div class="caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/segment.png" alt="analytics-icon">
<div class="caption">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/multi-channel.png">
<div class="caption">
<h3>/h3>
<p></p>
</div>
</div>
</div>
</section>
</div>
No CSS code, Bootstrap version 3.3.5
What can I do to make grid items aligned for resolution 991-1200px?