Bootstrap 4 将网格布局重新排序为2列
我有以下用于移动设备的div布局:Bootstrap 4 将网格布局重新排序为2列,bootstrap-4,bootstrap-grid,Bootstrap 4,Bootstrap Grid,我有以下用于移动设备的div布局: 当我达到中等断点时,我希望实现以下布局: 如何实现这一点?唯一的方法是使用d-md-block和float实用程序在md上禁用flex <div class="container"> <div class="row d-md-block"> <div class="col-md-4 float-right">
当我达到中等断点时,我希望实现以下布局:
如何实现这一点?唯一的方法是使用
d-md-block
和float实用程序在md上禁用flex
<div class="container">
<div class="row d-md-block">
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="1" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="2" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="3" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="4" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="5" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="6" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="7" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="8" class="w-100" />
</div>
</div>
</div>
谢谢@Zim,我就快到了,我稍微改变了布局,但现在我得到了8和7的顶部对齐。我想有8个直下2-看-所有部分将有动态生成的内容,他们将在高度不同耶,这是行不通的。浮动非常特定于高度/宽度。不必担心,我将按照动态内容的原样进行设置,看看如何最好地安排浮动
<div class="container">
<div class="row d-md-block">
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/000/fff&text=1" alt="1" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/111/fff&text=2" alt="2" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/222/fff&text=3" alt="3" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/333/fff&text=4" alt="4" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x300/444/fff&text=5" alt="5" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x100/555/fff&text=6" alt="6" class="w-100" />
</div>
<div class="col-md-4 float-right">
<img src="https://dummyimage.com/400x200/666/fff&text=7" alt="7" class="w-100" />
</div>
<div class="col-md-8 float-left">
<img src="https://dummyimage.com/400x800/777/fff&text=8" alt="8" class="w-100" />
</div>
</div>
</div>