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

问题描述

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

 < 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或更大视图端口的左侧。在任何较小的视图端口上，列将按正常顺序再次显示。

我认为是什么引发了人们的关注，是您必须将B置于A之上你的HTML 。有可能是一种不同的方式来做到这一点，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> 
  

view-port> = md

  | A | B | 
  

view-port< md

  | 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. Also see this article on Column Ordering

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