移动视图顶部的 Bootstrap 右列 [英] Bootstrap right Column on top on mobile view

问题描述

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

<div class="col-md-6">一个
<div class="col-md-6">乙

看起来像:

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

因此，如果我在移动设备上查看它，A 列在顶部，但我希望 B 列在顶部.这可能吗?我用推拉试了一下，没用.

解决方案

使用 列排序 来实现这一点.

col-md-push-6 会将列推"到右侧 6 并且 col-md-pull-6 会将列拉"到右侧留在md"或更大的视口上.在任何较小的视口上，列将再次处于正常顺序.

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

演示

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

view-port >= md

<代码>|A|B|

视图端口

<代码>|B||A|

I have a Bootstrap Page like this:

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

Looks like:

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

So if I look at it on a mobile Device, the Column A is on top, but I want the B on top. Is this possible? I tried it with push an pull, but it didn't work.

解决方案

Use Column ordering to accomplish this.

col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.

I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...

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>

view-port >= md

|A|B|

view-port < md

|B|
|A|

这篇关于移动视图顶部的 Bootstrap 右列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！