有什么方法可以实现 bootstrap 像推拉 MDL（材料设计）

Question

有什么方法可以实现 bootstrap 推拉 MDL（material designs lite）。

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

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

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

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>

有什么方法可以实现 bootstrap 像推拉 MDL（材料设计）

Is there any way to achieve bootstrap like push and pull in MDL(Materail design)

twitter-bootstrap

css

material-design

material-design-lite