how to fix this grid system issue in bootstrap - twitter-bootstrap-3

Question

I have an in img in boostrap and i want it to show in right and to show 4 objects in the left in two rows each one has two objects which is 4 columns from the grid
My HTML
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product first wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Energy</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="banner">
<img src="http://placehold.it/300x450">
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
</div> <!-- end of row-->
MY CSS
.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); }
and this is the result that shows up
http://i.imgur.com/2PhECdx.jpg

Answer 1

I have modified your code to make two columns and the first column is containing two rows with two columns.
<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>
Check this:
http://jsfiddle.net/h68hzfnc/