在MDL(材料设计)中有什么方法可以实现像推拉这样的引导呢？

Question

有什么方法可以通过我可以实现自举推拉在MDL(材料设计石)。

我正在处理的Usecase是2 cols并排出现在桌面上的：

A(mdl-cell-col--6)     B(mdl-cell-col--6)

但在平板电脑上，我想逆转订单:因此，新订单将出现在tablet视图上

B(mdl-cell-col--6)     A(mdl-cell-col--6)     

任何帮助都是非常感谢的！

Answer 1

您可以使用mdl-cell--order-N类(带有-tablet后缀)。

所以

A添加mdl-cell--order-2-tablet，B添加mdl-cell--order-1-tablet

您还应该将mdl-cell--4-col-tablet添加到两者中，因为tablet被假定为8列。

​

.mdl-cell {
  background-color: #BDBDBD;
  padding-left: 8px;
  padding-top: 4px;
  color: white;
  height: 50px;
}

    <!-- Material Design Lite -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--order-2-tablet">A</div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--order-1-tablet">B</div>
    </div>

​