具有不同卡高度的引导程序布局在某些分辨率上无法实现

Question

我一直在研究具有常规缩略图和特色缩略图的Bootstrap布局。一开始我有一个大的特色拇指，它可以正常工作，但是第二个则漂浮在右边，在某些分辨率下会破坏布局。

我能做些什么使它不破坏版面吗？根据我的观察，特色拇指的高度与两排常规拇指的高度以及它们之间的间距不同。

这是布局：

HTML

img {
  width: 100%;
  height: auto;
}
.row [class*=col-] {
  padding: 1%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
   <div class="row">
      <div class="col-sm-6 col-md-6 col-lg-4">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/jackpotGameThumbs/ISBKobushi.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSFruitZen.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSBoomanji.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb"src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSFruitZen.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-6/BSBoomanji.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-11/G170191.jpg">
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
         <img class="thumb" src="https://d1i6itcsqouwzx.cloudfront.net/cms/images/games/provider-id-3/PGBookOfDead.jpg">
      </div>
     <div class="col-sm-6 col-md-6 col-lg-4 pull-right">

CSS

img {
  width: 100%;
  height: auto;
}
.row [class*=col-] {
  padding: 1%;
}