4列のブートストラップ列の整列

Question

私はブートストラップで列の順序をしようとしています。デスクトップ画面ではこの順序が欲しいです。

------ -------------------- 
|a |b   |c  | 
------|   |---------- 
     |   |d  | 
     |   |---------- 
     ---------- 

小さな画面では、この注文が必要です。

------ ----------- 
|a |b   | 
------|   | 
|c |   | 
------|----------| 
|d | 
------- 

私のコードから、私はこれを取得します。上記の画像が間違っていた前。今私は上記の右のイメージに変更しました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 

 
    <div class="col-sm-4" style="color:black;background:yellow">A 
 
    </div> 
 
    <div class="col-sm-6" style="color:white;"> 
 
    <div class="row"> 
 
     <div class="col-sm-12 " style="color:white;background:green">B<br>B<br>B<br>B</div> 
 
     <div class="col-sm-4 col-sm-pull-8 " style="color:white;background:red">C</div> 
 
     <div class="col-sm-12 col-sm-pull-8 " style="color:white;background:blue">D</div> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

あなたが達成しようとして何本か？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
        <div class="row"> 
 
         <div class="col-sm-6 col-xs-12"> 
 
          <div style="background-color:yellow"> 
 
           1 
 
          </div> 
 
          <div style="background-color:green"> 
 
           2 
 
          </div> 
 
          <div style="background-color:red"> 
 
           3 
 
          </div> 
 

 
         </div> 
 
         <div class="col-sm-6 col-xs-12"> 
 

 
          <div style="background-color:blue"> 
 
           4 
 
          </div> 
 
         </div> 
 
        </div>

Answer 2

あなたは（クラスcol-sm-6の）等しいサイズの2つの列と一列を作成することができます。彼らは、デフォルトですべての利用可能な水平スペース（aboveと同じ答）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div style="color:black;background:yellow">A</div> 
 
    <div style="color:white;background:red">C</div> 
 
    <div style="color:white;background:blue">D</div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div style="color:white;background:green">B<br>B<br>B<br>B</div> 
 
    </div> 
 
</div>