当列不在一行中时，Bootstrap Column根据设备重新排序？

Question

我在bootstrap中编写了以下代码：

<div class="col-xs-12 col-md-8">
  <div class="alert alert-warning">
    1
  </div>
</div>

<div class="col-xs-12  col-md-4">
  <div class="alert alert-info">
    2
  </div>
</div>    

<div class="col-xs-12  col-md-4">
  <div class="alert alert-danger">
    3
  </div>
</div>

这在移动设备中提供了以下设计：

------
   1
------
   2
------
   3
------

现在，我如何使用相同的标记结构在桌面中获取以下视图？ ::

------------ ------
    1       |   3  |
--------------------
         2
--------------------

是否可以执行上述结构，如果我按照相同的标记？如果没有，请帮助我更好的方法。

注意：我是bootstrap的初学者