在 phone 上使用 Materialise 对列重新排序

Question

我正在使用物化框架并尝试重新排列 phone 视图中的列顺序。我想让 BUY BUTTON 在移动设备上出现在 CONTENT 之前。正在尝试拉和推，但无法弄清楚。有帮助吗？

提前致谢。

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

Answer 1

如果行数足够少，您可以使用 table 显示 CSS 属性！

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

Answer 2

我认为您应该将布局组织为移动设备优先：默认情况下 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>

在 phone 上使用 Materialise 对列重新排序

Reorder columns with Materialize on phone

css

materialize