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

回答

相關問題