行ブートストラップ応答

Question

これは、単純なブートストラップコードこの画像で

<div class="row" > 
     <div class="col-sm-8"> 

      one 

     </div> 

     <div class="col-sm-4"> 

      two 

     </div> 

<div class="row"> 
     <div class="col-sm-8"> 

      three 

     </div> 

     <div class="col-sm-4"> 

      four 

     </div> 

</div> 

です：応答1（ノーマル）

enter image description here

状況は、私が代わりにしたいです状況2！

ソリューション？あなたは何ができるかあなたが2つの外側の列と、このような巣の内側columsを行う必要があり

おかげ

Answer 1

..

<div class="row"> 
     <div class="col-sm-8"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        one 
       </div> 
       <div class="col-sm-12"> 
        three 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        two 
       </div> 
       <div class="col-sm-12"> 
        four 
       </div> 
      </div> 
     </div> 
    </div> 

http://www.codeply.com/go/EP61f111NO

Answer 2

は.col-md-*でrowsは2を作成するために、スタックされましたたとえば、次のようになります。

<div class="row"> 
    <!-- Left col --> 
    <div class="col-md-6 col-sm-6"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
    </div> 

    <!-- Right col --> 
    <div class="col-md-6 col-sm-6"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1>Col 1</h1> 
       <p>Description</p> 
      </div> 
     </div> 
    </div> 
</div>