我有一个问题,由于左侧和右侧位于不同的列中,所以 order-[num] 不起作用
View 截图
<section class="row justify-content-center">
<div class="col-md-11">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-12 mb-3 order-0">
order small 1
</div>
<div class="col-12 mb-3 order-2">
order small 3
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-12 mb-3 order-1">
Ordering as small 2
</div>
<div class="col-lg-6 mb-3 order-3">
ordering as small 4
</div>
<div class="col-lg-6 mb-3 order-4">
ordering as small 5
</div>
</div>
</div>
</div>
</div>
</section>
如果我将所有列放在一行中,它会创建一个位置 2 高度的大空白
最佳答案
我只能想到一个解决方案,复制第3节,将其副本放在第2节和第4行和第5行之间,并根据断点显示/隐藏第3节及其副本。
HTML
<div class="container">
<div class="row">
<div class="col-md-5">
<section class="mb-3">
1
</section>
<section class="mb-3 d-none d-md-block">
3
</section>
</div>
<div class="col-md-7">
<section class="mb-3">
2
</section>
<section class="mb-3 d-md-none">
copy of 3
</section>
<div class="row">
<div class="col">
<section class="mb-3">
4
</section>
</div>
<div class="col">
<section class="mb-3">
5
</section>
</div>
</div>
</div>
</div>
</div>
结果
在小屏幕上:
fiddle : http://jsfiddle.net/59x0s17k/1/
关于html - Bootstrap 4 对嵌套列进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52669811/