Question

我试图在不同的网络浏览器大小中订购一些对象我从bootstrap中学到了如何使用col-xx-push或col-xx-pull重新排序。

但是我无法复制我在图片中留下的这个订单。我非常感谢您的帮助，因为我已经尝试了一段时间，似乎无法做到正确。

直到现在我才知道

<div class="row">
 <div class="a col-md-6 col-xs-12 col-xs-push-12">A</div>
 <div class=" col-md-6 col-xs-12 col-xs-pull-12">B</div>
 <div class=" col-md-6 col-xs-12 ">C</div>
 <div class=" col-md-6 col-xs-12">D</div>
</div>

我错过了按顺序将它组织成xs到4行： C d 乙甲

Answer 1

简单的方法是生成两列A列和B列，如下所示。然后使用bootstrap响应实用程序（如hidden-xs和visible-xs- *）显示/隐藏列A和B.

<div class="row">
    <div class="a col-md-6 hidden-xs col-xs-push-12">A</div>
    <div class=" col-md-6 hidden-xs col-xs-pull-12">B</div>
    <div class=" col-md-6 col-xs-12 ">C</div>
    <div class=" col-md-6 col-xs-12">D</div>
    <div class="visible-xs-12">B</div>
    <div class="visible-xs-12">A</div>
</div>

有关使用自适应实用程序的更多信息，请访问http://getbootstrap.com/css/#responsive-utilities

Answer 2

推拉用于重新排列，而不是排。例如，如果你有

c
d
b
a

在手机上，你想要

abcd

在桌面上，您可以使用推拉来重新排列它。在你的情况下，我认为它在不同的大小上被称为可见和不可见。在这里你做到了。首先创建两个相同大小的列。左边是pic，右边等（md）

<div class="row">
    <div class="col-md-6">
        pic(A)
    </div>
    <div class="col-md-6">
        B
        C
        D
    </div>
</div>

之后，你开始使用推拉设计响应，因为在移动设备上你需要pic底部。要做到这一点，最好从手机重新开始，以便将其编辑为这样

<div class="row">
    <div class="col-md-6">
        B
        C
        D
    </div>
    <div class="col-md-6">
        pic(A)
    </div>
</div>

添加推拉。因为如果你没有推拉，在电脑上，pic会在右边，而在左边等等。

<div class="row">
    <div class="col-md-6 col-md-push-6">
        B
        C
        D
    </div>
    <div class="col-md-6 col-md-pull-6">
        pic(A)
    </div>
</div>

好的，现在使用可见和隐藏重新排列移动设备上的行。为此，我们必须创建每个div。

<div class="row">
    <div class="col-md-6 col-md-push-6">
        <div class="hidden-md">
            B
        </div>
        C
        D
        <div class="visible-md-12">
            B
        </div>
    </div>
    <div class="col-md-6 col-md-pull-6">
        pic(A)
    </div>
</div>

希望它能帮助你学习。

阅读来源：http://getbootstrap.com/css/#responsive-utilities

如何根据大小在bootstrap中设置不同顺序的行和列

2 个答案: