html - Bootstrap 4.0 移动布局的排序/移动列

标签 html css layout bootstrap-4

这就是 lg 中的布局。

在移动设备上,sm,我希望列顺序为:1、3、5、2、6、4

使用 Bootstrap 4.0 或重写是否可能和/或相当简单?

我所有使用 order-sm 1-12 的尝试都失败了。我无法将第 4 列写到最后,成为最后一列,但我还是这样做了。

如果我的要求不可能实现,那么在移动设备上将 4 移动到末尾是最重要的重组。

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
|           |     |_____|
|     3     |  4  |     |
|           |     |  5  |
|           |     |_____|
|           |_____|     |
|___________|     |  6  |
                  |     |
                  |_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>

编辑:这几乎是我想要的,但代码在第 1 列和第 3 列之间产生了间隙。第 6 列也低于第 3 列。第 6 列的所需位置低于 5。

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
 _________________|_____|
|           |     |     |
|     3     |  4  |  5  |
|           |     |_____|
|           |_____|
|___________|
|     |
|  6  |
|     |
|_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-md-1 order-lg-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-4 order-sm-4 order-md-4 order-lg-2'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-2 order-sm-2 order-md-2 order-lg-3'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-6 order-sm-6 order-md-6 order-lg-4'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-3 order-sm-3 order-md-3 order-lg-5'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-5 order-md-5 order-lg-6'>
        6
    </div>
</div>

最佳答案

你应该在 root 中使用 d-flex 来使用命令 你正在使用类 'my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'> 这应该像下面..

HTML

<div class='my-5 px-3 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-1 order-sm-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-2 order-sm-4'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-3 order-sm-2'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-4 order-sm-2'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-6'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-6 order-sm-5'>
        6
    </div>
</div>

注意:我在代码中添加的顺序可能与您预期的不同,只需将 order-sm-* 更改为您想要的顺序即可。

DEMO: https://codepen.io/rahul-pxl/pen/pqgmWo

关于html - Bootstrap 4.0 移动布局的排序/移动列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53778749/

相关文章:

javascript - 点击 td 后将图像添加到 td

html - 元素收缩和增长与CSS

html - 在页面上向下滚动时遇到问题

javascript - jQuery 图像绝对源路径

javascript - Angular E2E 测试让隐藏元素仅在 E2E 期间显示

html - 以 % 设置元素高度

html - 防止文本落后于幻灯片

java - 如何在 LWUIT 框架中使用 CSS?

java - 我想通过单击添加按钮动态添加 JLabel 和文本框

java - JPanel 中央一列三行