ブートストラップスタッキング列

Question

私は愚かなブートストラップの問題があります。

コード：

<div class="row"> 
    <div class="col-sm-4" style="background-color:pink;"> lorem... </div> 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... </div> 
    <div class="col-sm-4" style="background-color:pink;"> lorem... </div> 
</div> 

私はそれの上のスペースに最後のピンクのdivに合うようにしたいと思います。 私の目標を達成する最も簡単な方法は？このような

Answer 1

<div class="row"> 
    <div class="col-sm4"> 
     <div class="row"> 
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
      <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
     </div> 
    </div> 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... </div> 
</div> 

Answer 2

セット2列：

• 4つのCOLSの1、すべての子供が12のcolsのを持っている
• 8つのCOLSの別：

  <div class="row"> 
      <div class="col-sm-4"> 
       <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
       <div class="col-sm-12" style="background-color:pink;"> lorem... </div> 
      </div> 
  
      <div class="col-sm-8"> 
       <div class="col-sm-12" style="background-color:yellow;"> lorem... </div> 
      </div> 
  </div> 
  

  だからあなたは今、2列を持っています親の最大幅を取る（4または8列）

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="row"> 
 
    <div class="col-sm-4" style="background-color:pink;"> 
 
    <div class="row">lorem... top</div> 
 
    <div class="row">lorem... bottom</div> 
 
    </div> 
 
    <div class="col-sm-8" style="background-color:yellow;"> lorem... Yellow</div> 
 

 
</div>

それは

を役に立てば幸い