Question

这是我的代码：

<div class="row">
    <div class="col-sm-12 col-lg-3">
        A
    </div>
    <div class="col-sm-12 col-lg-9">
        B
    </div>      
</div>

这是我在桌面设备上的模板：

+-------+-------+-------+-------+
|       |                       |
|   A   |           B           |
|       |                       |
+-------+-------+-------+-------+

这是我在移动设备上的模板：

+-------+-------+-------+-------+
|                               |
|               A               |
|                               |
+-------+-------+-------+-------+
|                               |
|               B               |
|                               |
+-------+-------+-------+-------+

但我希望我的模板在移动设备上看起来像这样：

+-------+-------+-------+-------+
|                               |
|               B               |
|                               |
+-------+-------+-------+-------+
|                               |
|               A               |
|                               |
+-------+-------+-------+-------+

有没有办法实现这一目标而不必改变我的初始结构？

Answer 1

你可以使用col push＆amp;拉类很容易实现这一点。有一个很好的解释here应该有所帮助。

要拼出它，你需要将B移动到A之上，然后将A拉过9个大的屏幕以获得大屏幕（col-lg-pull-9）并将B推过3个col以获得更大的屏幕（col-lg-push- 3）。因此，代码将是：

<div class="row">
    <div class="col-sm-12 col-lg-9 col-lg-push-3">
        B
    </div> 
    <div class="col-sm-12 col-lg-3 col-lg-pull-9">
        A
    </div>
</div>

好的，阅读下面的评论，你说你不能改变div的顺序。你能用jQuery吗？如果是这样，试试这个：

$(document).ready(function(){
    if ($(window).width() < 768){
        alert("mobile");
        $("#divB").insertBefore("#divA");
    }
    else {
        alert("not mobile");
    }
});

http://jsfiddle.net/humotrj0/173/

Answer 2

您可以更改HTML中的顺序（第一个div B），这是移动订单，并使用col-lg-push-*和col-lg-pull-*更改桌面订单。

请参阅http://getbootstrap.com/css/#grid-column-ordering

Answer 3

您需要使用col-lg-push和col-lg-pull选项您无法在较小的屏幕中更改列的顺序，但您可以在大屏幕中执行此操作。

因此，请更改列的顺序。

<div class="row">

    <div class="col-lg-9 col-lg-push-3">
        B
    </div>    
    <div class=" col-lg-3 col-lg-pull-9">
        A
    </div>
</div>

默认情况下，它首先显示主要内容。

因此，首先显示移动主内容。

通过使用col-lg-push和col-lg-pull，我们可以对大屏幕中的列重新排序，并在左侧显示侧栏，在右侧显示主要内容。查看它在Bootsnipp

中工作

Twitter Bootstrap - 在移动设备上的右侧容器之后显示左列

3 个答案: