html - 使用Bootstrap将列推到移动 View 的顶部

我有四列使用Bootstrap列类

<div class="col-md-3">
    @include('schedulizer.classes-panel')
    @include('schedulizer.time-span-options-panel')
    @include('schedulizer.other-options-panel')
</div>

<div class="col-md-9 col-centered">
    @include('schedulizer.schedule-panel')
</div>

他们看起来像这样：



在移动视图中，日程安排是主要要素，如下所示一直推到底：



检测到较小的屏幕分辨率时，是否可以将列“推”到顶部？

最佳答案

是。只需重新排列它们并使用推拉

<div class="col-md-9 col-centered col-md-push-3">
    @include('schedulizer.schedule-panel')
</div>

<div class="col-md-3 col-md-pull-9">
    @include('schedulizer.classes-panel')
    @include('schedulizer.time-span-options-panel')
    @include('schedulizer.other-options-panel')
</div>

演示：http://www.bootply.com/GdWNOo6stu