Twitter Bootstrap:列重新排序全宽度 [英] Twitter Bootstrap: column re-ordering for full width divs
本文介绍了Twitter Bootstrap:列重新排序全宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
它看起来像一个简单的任务,但不能得到它的工作。我需要重新排序divs为平板电脑,这是100%的宽度。请观看以下小提琴,看看我的意思。
It looks like a simple task, but can't get it working. I need to re-order divs for tablets, which are 100% width. Please take a look at the following fiddle to see what I mean.
原始参考:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
http://getbootstrap.com/css/#grid-column-ordering
推荐答案
p>它的可行如果你认为移动第一。将div按照您希望他们出现在小视口中的顺序放置,然后重新排序为较大的视口。
Its doable if you think mobile first. Place the divs in the order you want them to appear in small viewports and then reorder them for larger viewports.
<div class="row">
<div class="col-sm-12 col-md-6 col-md-push-6">
<div style="background:red">
Put the one that for small screen on top
</div>
</div>
<div class="col-sm-12 col-md-6 col-md-pull-6">
<div style="background:green">
Put the one that for small screen on bottom
</div>
</div>
</div>
这篇关于Twitter Bootstrap:列重新排序全宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文