Twitter Bootstrap：列重新排序全宽div

它看起来像一个简单的任务，但无法让它工作。我需要重新订购宽度为100％的平板电脑。请看下面的fiddle看看我的意思。Twitter Bootstrap：列重新排序全宽div

原始参考：

<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

来源

2014-10-20 Morpheus

谷歌搜索：“引导垂直重新排序”或看到http://stackoverflow.com/questions/20780146/bootstrap-push-pull-vertical – pbenard 2014-10-20 13:09:27

你希望divs对于所有屏幕尺寸都是100％宽度？ – tmg 2014-10-20 13:18:07

我想避免使用JavaScript。 @丹哥不理解你的小提琴？它有关系吗？ @tmg不行，只为'-sm' – Morpheus 2014-10-20 13:19:08

它是可行的，如果你认为移动第一。按照您希望它们出现在小视口中的顺序放置div，然后对它们重新排序以获得较大的视口。

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

来源

2014-10-20 13:25:19 tmg

你和我想出了相同的代码。在这里，[拿这个jsfiddle]（http://jsfiddle.net/6aj2wcvw/）。 – charles 2014-10-20 13:32:02

@tmg谢谢。我认为这很简单:) – Morpheus 2014-10-20 13:32:42

有围绕一个黑客，如果你不想做手机第一：

@media (max-width: 768px) { 
     .row.reorder-xs { 
     transform: rotate(180deg); 
     direction: rtl; /* Fix the horizontal alignment */ 
     } 

     .row.reorder-xs > [class*="col-"] { 
     transform: rotate(-180deg); 
     direction: ltr; /* Fix the horizontal alignment */ 
     } 
    }

来源

2017-04-03 13:44:28

Twitter Bootstrap：列重新排序全宽div

回答

相关问题