Twitter bootstrap 3 引导列排序4列

我正在做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>

A.
B
B
B
B
C
D

你的

b

应该有那么大的内容还是你想要那么大的空间？b内容是动态的。如果用户添加内容，b内容的高度会变大。可能会重复