使用手机上的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对列进行重新排序

回答

相关问题