想要重新排列不同高度的列,而没有任何空格或空白。如果您看所附的图像,就能知道我在寻找什么。我正在使用Bootstrap3。通过当前的实现,我正在获得空白(请参阅映像点#3)。但是我需要实现图像#1的解决方案。
<div class="row">
<div class="col-xs-12 col-md-8">
<img src="https://i.ytimg.com/vi/SiVr9DM_EG0/maxresdefault.jpg" width="100%" />
</div>
<div class="col-xs-12 col-md-4">
<img src="https://www.fnordware.com/superpng/pnggrad8rgb.png" width="100%" />
</div>
<div class="col-xs-12 col-md-8">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</div>
<div class="col-xs-12 col-md-4">
<p style="border:3px solid #f1f1f1; padding:5px; color:#ff6600;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
希望达到#1之类的结果。但是用我的代码,我变得像图像中标记的#3。我不要那个红色标记的区域,相反,我应该将“ Bla Bla Text”移动到“ Actor Block”旁边。请帮忙。