我有一个这样的引导页面:
<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”或更大视口的左侧。在任何较小的视口上,列将再次按正常顺序排列。
col-md-push-6
col-md- pull-6
我认为让人们失望的 是,您必须在 HTML 中将 B 放在 A 之上 。可能有一种不同的方法可以做到这一点,其中 A 可以在 HTML 中高于 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>
view-port < md
|A|B|
|B| |A|