使用手機上的Materialize對列進行重新排序

我正在使用物化框架，並試圖在電話視圖中重新排列列順序。我希望在手機上的CONTENT之前有BUY按鈕。試圖拉和推，但無法弄清楚。任何幫助？使用手機上的Materialize對列進行重新排序

預先感謝您。

<div class="row"> 
    <div class="col s12 m3 l3"> 
     <img src=""> 
    </div> 
    <div class="row"> 
     <div class="col s12 m6 push-m6 l7">CONTENT</div> 
     <div class="col s12 m6 pull-m6 l2">BUY BUTTON</div> 
    </div> 
</div>

來源

2016-07-06 Ken Ryan

我認爲你應該爲移動先行整理佈局：在BUY BUTTON時之前來，並在平板電腦屏幕或更大（.m或.l類），你用push和pull：

<div class="row"> 
    <div class="col s12 m3 l3"> 
     <img src=""> 
    </div> 
    <div class="row"> 
     <div class="col s12 push-m6 m6 push-l7 l2">BUY BUTTON</div> 
     <div class="col s12 pull-m6 m6 pull-l2 l7">CONTENT</div> 
    </div> 
</div>

來源

2016-07-06 18:59:28

謝謝！這樣可行。那麼，如果我想讓列僅在移動設備上重新排序呢？只會相應推push-s12和拉-s12並擺脫其他push-m push-l？ –

我使用這種方法進行了測試，但它不起作用，因爲'push-s12'會將'BUY BUTTON'推出屏幕，而不是'CONTENT'上的堆棧。 –

如何重新排列僅在移動設備上的列？這真的是我需要它來改變秩序的地方。 –

如果您的行數足夠少，您可以使用表格顯示CSS屬性！

.row .l7{ 
    display: table-footer-group; 
} 
.row .l2{ 
    display: table-header-group; 
}

來源

2016-07-06 18:53:38 will

我可以通過實現嗎？ –

使用手機上的Materialize對列進行重新排序

回答

相關問題