Twitter bootstrap 3 - 列排序
Twitter bootstrap 3 - Column ordering
我有关于 jsfidle 的例子。 我想重新排列方框,如下所示:
谢谢你的想法
为了实现此结构,您需要将 "content" div 向右拉至 sm,向左拉至 xs。[bootstrap-pull-left-for -小型设备][1]
这篇 link 将帮助您做到这一点..
所以,html 将是
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-xs-12">Menu</div>
<div class="col-sm-6 col-xs-12 pull-right-sm pull-xs-left">content</div>
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-sm-12">News</div>
<div class="col-sm-12">Photo</div>
</div>
</div>
</div>
</div>
和CSS将是
@media (max-width: 767px) {
.pull-xs-left {
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.pull-sm-right {
float: right;
}
}
只需在内容栏中使用 pull-right
class.. 不需要额外的 CSS:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-xs-12">
menu
</div>
<div class="col-sm-8 col-xs-12 pull-right">
content
</div>
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-sm-12">
news
</div>
<div class="col-sm-12">
photo
</div>
</div>
</div>
</div>
</div>