Question

我想知道是否有可能在bootstrap中更改col右上小时？当小的是左列时，默认列在上面。

我想这样：

- 1-- - 2-- - 3 -

小时这样：

- 3 -

- 2 -

- 1 -

这是我在bootstrap中的原始代码：

    <div class="row">
        <div class="col-sm-4">
            1
        </div>
        <div class="col-sm-4">
            2
        </div>
        <div class="col-sm-4">
            3
        </div>
    </div>

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/41/

<强> HTML

    <div class="row">
    <div class="col-sm-4 col-sm-push-8">
        3
    </div>
    <div class="col-sm-4">
        2
    </div>
    <div class="col-sm-4 col-sm-pull-8">
        1
    </div>
</div>

Answer 2

你可以让第三个div首先使用push and pull in bootstrap以更大的屏幕尺寸移动它们。

这是一个有类似问题的人：

Reverse grid arrangment?

这里是推送和拉动引导程序的文档： http://getbootstrap.com/css/#grid-column-ordering

Answer 3

以下内容应该有效。

<div class="row">
    <div class="col-md-4 col-sm-12">
        1
    </div>
    <div class="col-md-4 col-sm-12">
        2
    </div>
    <div class="col-md-4 col-sm-12">
        3
    </div>
</div>

您可以添加多个＆＃34;列类型＆＃34;去上课。您可以使用以下列类型：

.col-xs- *，适用于小于768像素宽的屏幕
.col-sm- *，适用于宽度超过768像素的屏幕
.col-md- *，适用于宽度超过992像素的屏幕
.col-lg- *，适用于1200px宽以上的屏幕

参考文献：

Bootstrap右列小时上去

3 个答案: