我有一个这样的引导页面:

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

看起来像:

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

因此，如果我在移动设备上查看它，A 列在顶部，但我希望 B 列在顶部。 这可能吗？ 我试过推拉，但没有用。

最佳答案

使用 Column ordering来实现这一点。

col-md-push-6 会将列“推”到右侧 6 并且 col-md-pull-6 会将列“拉”到留在“md”或更大的视口(viewport)上。在任何较小的视口(viewport)上，列将再次按正常顺序排列。

我认为让人们失望的是，您必须在 HTML 中将 B 放在 A 之上。可能有一种不同的方法可以做到这一点，其中 A 可以在 HTML 中高于 B，但我不知道该怎么做......

DEMO

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

视口(viewport) >= md

|A|B|

视口(viewport)

|B|
|A|

https://stackoverflow.com/questions/20979062/