使用 Twitter Bootstrap 响应式地重新排序 div? [英] Reordering divs responsively with Twitter Bootstrap?
问题描述
我正在使用 和偏移.真的有可能吗?
这是我使用 JSFiddle 的情况:http://jsfiddle.net/3vYgR/一个>
Bootstrap 4 或 Bootstrap 5 的用户会希望看到这个问题:引导更改列的顺序
引导程序 3(原始答案)
我想你想看看 push
和 pull
类...
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">A</div><div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">B的内容</div><div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">C的内容</div>
I am working with Twitter Bootstrap v3 and want to reorder elements responsively, using column ordering and offsetting.
This is how I would like to use my elements. At -xs
or -sm
breakpoints, with the containing div stacked 4 to a row:
At -md
or -lg
breakpoints, with the containing div stacked 2 to a row:
This is the current code - I know how to set the classes on the containing div, but not on A, B and C:
<div class="row">
<div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
</div>
</div>
... more containing divs...
</div>
I can't figure out how to get A, B and C in the right order with Bootstrap 3's column ordering and offsetting. Is it actually possible?
This is as far as I've got using JSFiddle: http://jsfiddle.net/3vYgR/
Users of Bootstrap 4 or Bootstrap 5 will want to see this question: Bootstrap change order of columns
Bootstrap 3 (original answer)
I think you want to look at the push
and pull
classes...
<div class="row">
<div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
<div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
<div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>
Demo: http://bootply.com/77853
这篇关于使用 Twitter Bootstrap 响应式地重新排序 div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!