Twitter Bootstrap - 移动设备上右容器后的左列显示[重复]答案

【问题标题】：Twitter Bootstrap - Left column display after right container on mobile devices [duplicate]Twitter Bootstrap - 移动设备上右容器后的左列显示[重复]
【发布时间】：2017-01-29 08:26:43
【问题描述】：

这是我的代码：

<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               |
|                               |
+-------+-------+-------+-------+

有没有什么方法可以在不改变我的初始结构的情况下实现这一点？

【问题讨论】：

答案中的一些cmets应该放在问题中，因为就问题而言，Gabriel有正确的答案。
这已经在 SO 上被问过很多次了。下面的答案也是正确的。只需在标记中使用推/拉并将 A-B 反转为 B-A。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用 col push & pull 类很容易地实现这一点。 here 有一个很好的解释，应该会有所帮助。

要拼写出来，您需要将 B 移到 A 上方，然后将 A 拉过 9 列以获得大屏幕 (col-lg-pull-9) 并将 B 推过 3 列以获得更大的屏幕( 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>

好的，阅读下面的 cmets，您说您不能更改 div 的顺序。可以使用 jQuery 吗？如果是这样，试试这个：

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

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

【讨论】：

如果你真的打开链接并阅读信息，你会看到它包含一个演示和代码示例，但询问你会收到 -codepen.io/sevilayha/pen/ihgLz?editors=100
我已经更新了答案。这给出了问题中详述的预期行为。如果您遇到问题，那么您需要提供更多信息以帮助我们帮助您。

【解决方案2】：

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

见http://getbootstrap.com/css/#grid-column-ordering

【讨论】：

不，我更喜欢引导用户，让他们继续研究，而不是。基本上，您必须首先考虑您的 HTML 移动设备，放置您希望在移动设备上显示的 div。然后将col-lg-push-9 类添加到您想要推到右侧的类，并将col-lg-pull-3 添加到您想要拉到大屏幕左侧的类。跨度>

【解决方案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查看它的工作情况

【讨论】：

现在检查。它应该工作
jsfiddle.net/xdp31yrr/1
我希望你试试我建议的代码。它适用于您想要的输出。抱歉帮不上忙