このようなテーブルをブートストラップで作るには？

Question

良い一日。

どのようにブートストラップでそのような事をマッピングするために教えてください：

codepen.io/anon/pen/bqJdQJ

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <img src="http://my.ln-family.com/image/banners/ban111.jpg" class="img-responsive"> 
      </div> 
      <div class="col-md-6"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <img src="http://my.ln-family.com/image/banners/ban22.jpg" class="img-responsive"> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-md-12"> 
         <img src="http://my.ln-family.com/image/banners/ban33.jpg" class="img-responsive"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

左に右2に、一つの大きな絵があるでしょう50％（例えば、66/33）

2列の作成には問題はありませんが、右側の2行では問題はありませんが、右の画像が左の高さを超えないようには機能しません。

は、左の列の画像の幅がその親にあふれているように見えるあなたの助けのために事前に

Answer 1

、ありがとうございました。また

を影響されることから、他の要素を防ぐため

の崩壊から左と右の列を妨げている余裕があり、クラス名col-md-6

との最初のdivにクラス名left-colを追加し、クラス名を追加次のcol-md-6

スタイルとしてクラス名を持つ第二のdivにrigh-col

.left-col{ 
    padding-right:0; 
    margin-right:0; 
} 
.right-col{ 
    padding-left:0; 
    margin-lrft:0'' 
} 
.col-md-6 img{ 
    width:100%; 
    height:100%; 
} 

あなたは同じ高さを持っている2つの列を

pen is here