bootstrap列排序4列

Question

我正在用4列进行列排序。在大屏幕中，我想要这样。

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

在小屏幕中，我想按顺序堆叠，a，b，c，d，如下所示。

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

以下是我的代码。

<div class="row">

  <div class="col-sm-4"style="color:black;background:yellow">A
  </div>
  <div class="col-sm-6"style="">
      <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>