引导移动视图顶部的右列

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (14)

我有一个这样的引导页:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

看起来:

-----
|A|B|
-----

所以如果我在移动设备上看它,列A在上面,但是我想要B在上面。这有可能吗?

提问于
用户回答回答于

col-md-push-6将列“推”到右边6和col-md-pull-6将“拉”列到左边的“md”或更大的视图端口。在任何较小的视图端口上,列将再次按正常顺序排列。

在HTML中A可以超过B的情况下,可能有一种不同的方法来实现这一点,但我不知道如何做到这一点.

演示

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

视图-端口>=md

|A|B|

视图端口<md

|B|
|A|
用户回答回答于

值得注意的是,如果使用的列都不等于6,则推送量将不等于初始列大小。

如果有2列(A&B),并且希望A列更小,在“sm”或更大的视图上右边,但在移动(Xs)视图端口的上方,则使用以下命令:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

否则,列的对齐将显示为“关闭”。

扫码关注云+社区