Bootstrap 3中的列排序

Question

这是我的演示：http://jsfiddle.net/8bxYr/215/

我想在移动设备屏幕中订购我的div，并且我使用Bootstrap 3。

最近我读过这篇文章：Scotch但是我无法处理这个

Html：

<div class="container content">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
            should be below
        </div>
         <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
             should be above in mobile screen
        </div>

   </div>
</div>  

有什么建议吗？感谢

Answer 1

您将在第二列中放置您想要结束的div，而不是第一列。你也不需要所有那些col- - （col-xs- *也不会在xs视口上堆叠）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="well well-lg clearfix">
      <div class="col-sm-6 col-sm-push-6">
        <div class="alert alert-info">should be above in mobile screen</div>
      </div>
      <div class="col-sm-6 col-sm-pull-6">
        <div class="alert alert-danger">should be below</div>
      </div>
    </div>
  </div>
</div>