我有以下结构
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
是否有可能使用引导程序在小屏幕上轻松显示以下顺序?
|框1|
|框3|
|框2|
我不知道如何以这种方式交换行。谢谢
而不是将框列放在另一行中。 您可以将所有框列放在同一行中。您可以使用col-sm-push-*
或col-sm-pull-*
实用程序在引导程序中实现列顺序。
在此处查看演示
.HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>