Question

我有两个标题

<section>
    <header class="col-lg-9">
        <!-- some content -->
    </header>
    <header class="col-lg-3">
        <!-- some content -->
    </header>
</section>

第一个标题显示在左侧，第二个标题显示在右侧。因为在移动第一个标题首先出现，滚动第二个标题后出现。

基本上我想在移动视图中移动左侧的第二个标题和右侧的第一个标题。（最大991px）。因此，第一个标题将首先出现，然后第一个标题将出现在移动视图中。

Answer 1

您可以使用Bootstrap的本机column ordering来完成此任务。

示例：

<section>
    <header class="col-lg-9 col-sm-push-9">
        <!-- some content -->
    </header>
    <header class="col-lg-3 col-sm-pull-3">
        <!-- some content -->
    </header>
</section>

Answer 2

像这样使用Bootstrap列排序......

<section>
    <header class="col-lg-3 col-lg-push-9">
        col 3
    </header>
    <header class="col-lg-9 col-lg-pull-3">
        col 9
    </header>
</section>

演示：http://www.codeply.com/go/ev3iyxTi8M

在移动设备上从左到右移动标题

2 个答案: