引导程序:将div从一列移动到另一列，移动设备的订单计数

本文介绍了引导程序:将div从一列移动到另一列，移动设备的订单计数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 < 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;}}

<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;
    }
}

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