Question

我使用Bootstrap 3为桌面设备安装了这样的代码：

<div class="row">
<div class="col-md-5">
<img src="logo.png">
</div>
<div class="col-md-4">
Element 1
</div>
<div class="col-md-3">
Element 2
</div>
</div>

我想更改仅限移动版本的列的位置以更改元素1和元素2 HTML代码如何使用jQuery或？

我想为移动设备进行此更改，我不知道如何更改元素的位置？我在结果中需要这个

  <div class="row">
    <div class="col-md-5">
    <img src="logo.png">
    </div>
    **<div class="col-md-3">
    Element 2
    </div>**
    <div class="col-md-4">
    Element 1
    </div>
    </div>

Answer 1

您可以从Bootstrap文档中找到有用的文本：

column ordering

此外，Stackoverflow上的this thread中有更详细的用法示例和说明。

Answer 2

使用jQuery可以获得相同的结果。这里已经回答了同样的问题：Swtich 2 divs

Answer 3

试试这个：

   <div class="row">
        <div class="col-xs-5">
            Element 0
        </div>
        <div class="col-xs-4 col-xs-push-3 col-sm-push-0">
            Element 1
        </div>
        <div class="col-xs-3 col-xs-pull-3 col-sm-pull-0">
            Element 2
        </div>
    </div>

这改变了例如移动设备的列的位置。正如你所看到我正在使用推拉。要获得元素的正确位置，您必须重置特定宽度的拉/推。

如何更改Bootstrap列的位置？

3 个答案: