使用Bootstrap将列推到移动视图的顶部

Question

我有四列使用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>

他们看起来像这样：

在移动视图中，时间表（主要元素）一直推到底部，如下所示：

当检测到较小的屏幕分辨率时，有没有办法将列“推”到顶部？

Answer 1

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

<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