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

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>

它们看起来像这样:

在移动 View 中，主要元素日程安排被一直推到底部，如下所示:

当检测到较小的屏幕分辨率时，有什么方法可以将列“推”到顶部吗？

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