Twitter Bootstrap:全宽 div 的列重新排序 [英] Twitter Bootstrap: column re-ordering for full width divs

问题描述

这看起来像一个简单的任务，但无法让它工作.我需要重新订购 100% 宽度的平板电脑的 div.请查看以下 fiddle 以了解我的意思.

原文参考:

<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>

http://getbootstrap.com/css/#grid-column-ordering

解决方案

如果您首先考虑移动，它是可行的.按照您希望它们在小视口中出现的顺序放置 div，然后为更大的视口重新排列它们.

<div class="col-sm-12 col-md-6 col-md-push-6"><div style="background:red">把小屏幕的那个放在上面

<div class="col-sm-12 col-md-6 col-md-pull-6"><div style="background:green">把小屏幕的那个放在底部

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.

Original reference:

<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

解决方案

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:全宽 div 的列重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！