如何更改Bootstrap列的位置?

时间:2014-08-29 08:46:40

标签: javascript jquery html css twitter-bootstrap

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

3 个答案:

答案 0 :(得分:1)

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

column ordering

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

试试这个:

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

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