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

【问题标题】：Is there any way to achieve bootstrap like push and pull in MDL(Materail design)有什么方法可以在MDL（材料设计）中实现像推拉这样的引导
【发布时间】：2018-03-05 18:01:50
【问题描述】：

有什么方法可以让我在 MDL（材料设计精简版）中实现引导推拉。

我正在处理的用例是 2 个列并排出现在桌面上，如下所示：

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

但在平板电脑上我想颠倒顺序：所以新订单将在平板电脑视图上

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

感谢任何帮助！

【问题讨论】：

标签： twitter-bootstrap css material-design material-design-lite

【解决方案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>

【讨论】：