Bootstrap右栏位于移动视图顶部

小编典典

css

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

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

好像：

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

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

阅读 454

2020-05-16

共1个答案

小编典典

使用列排序来完成此操作。

col-md-push-6将col-md-pull-6在“ md”或更大的视口上将列“推”到右侧6，并在“ md”上将列“推”
到左侧。在任何较小的视口上，列将再次保持正常顺序。

我认为让人们失望的 是，您必须在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>

视口> = md

|A|B|

视口<md

|B|
|A|

2020-05-16