使用 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>

它们看起来像这样：

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

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

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

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

Push column to the top on mobile view using Bootstrap

html

css

twitter-bootstrap