这就是 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-*
更改为您想要的顺序即可。
关于html - Bootstrap 4.0 移动布局的排序/移动列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53778749/