Twitter bootstrap 3 如何在引导中解决这个网格系统问题

我在boostrap中有一个in-img，我希望它在右边显示，在左边两行显示4个对象，每个对象有两个对象，从网格中有4列

我的HTML

这就是结果

---

我修改了您的代码，使之成为两列，第一列包含两行两列

 <div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

    <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>
</div>

<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

   <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div> 
</div>
</div>

<div class="col-md-4 col-sm-6 col-xs-12 img-container">

</div>

</div>

选中此项：

.product{   overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%;  color: white;
 z-index: 2000;  font-size: 20px; opacity:0; transition:all 0.5s;}

 .product h6 {position: absolute; top: 40%; left:-200%;   color: white;
 z-index: 3000;  font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;  
 transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }

 <div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

    <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>
</div>

<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div>

   <div class="col-md-6 col-sm-6 col-xs-12 img-container">

  </div> 
</div>
</div>

<div class="col-md-4 col-sm-6 col-xs-12 img-container">

</div>

</div>