引导程序:将div从一列移动到另一列，移动设备的订单计数 [英] Bootstrap: move div from one column to another, order counts for mobile devices

问题描述

 < div class ="row">< div class ="col-lg-7">< div>具有ID和类</div>的块1< div>具有ID和类</div>的块2</div>< div class ="col-lg-5">< div>具有ID和类</div>的块3</div></div> 

如何使其外观

  block1块3街区2 

用于手机吗?

P.S.当然，在问我问题之前，我先看了一下这些问题:

重要提示:第​​3块可能比第1块高(且更高)(高度更大).

解决方案

无需使用推/拉.只需考虑移动优先"即可.

 < div class ="row">< div class ="col-lg-7">< div>块1</div></div>< div class ="col-lg-5">< div>块3</div></div>< div class ="col-lg-7">< div>块2</div></div></div> 

http://www.codeply.com/go/jgvSJrMOnk

如果 block 3 比其他列高，请创建一个特殊的类使其在大屏幕上向右浮动.

  @media(最小宽度:1200px){.pull-lg-right {float:right;}} 

相关:
如何做我更改了Bootstrap 3 div列的顺序
在移动版本上具有不同顺序的引导程序(引导程序4)

<div class="row">
    <div class="col-lg-7">
        <div>block1 with IDs and classes</div>
        <div>block2 with IDs and classes</div>
    </div>
    <div class="col-lg-5">
        <div>block3 with IDs and classes</div>
    </div>
</div>

How to make it look like

block1 
block3 
block2 

for mobile?

P.S. Of course I took a look at this questions before I asked mine:

SO: How do I change Bootstrap 3 column order on mobile layout?

It doesn't help. Also, adding hidden-xs and visible-xs for two blocks of

<div>block2 with IDs and classes</div>

in different places doesn't help as IDs should be unique on the page.

Any suggestions? Thank you. Example:

IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.

解决方案

No need to use push/pull. Just think "mobile-first"..

 <div class="row">
        <div class="col-lg-7">
            <div>block1</div>
        </div>
        <div class="col-lg-5">
            <div>block3</div>
        </div>
        <div class="col-lg-7">
            <div>block2</div>
        </div>
 </div>

http://www.codeply.com/go/jgvSJrMOnk

In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..

@media (min-width:1200px) {
    .pull-lg-right {
      float:right;
    }
}

Related:
How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)

这篇关于引导程序:将div从一列移动到另一列，移动设备的订单计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！