css - 使用媒体查询重新排序 div 表格单元格

Question

我有一个包含两个单元格的 div 表。现在，当我的页面显示在智能手机上时，我想在页面顶部显示第二个单元格，在页面底部显示第一个单元格:

<div class="table">
    <div class="cell1"></div>
    <div class="cell2"></div>
</div>

.table {
    display: table;
}

.table .cell1,
.table .cell2 {
    display: table-cell;
}

@media (max-width: 480px) {
    .table .cell1,
    .table .cell2 {
        width: 100%; // must be full width on smartphones
        display: block;
    }
    // how to display cell2 at top and cell1 at bottom?
}

我尝试添加 float 属性，如 float: left 和 float: right，但它不起作用。

附言

我不能只删除表格布局而只使用 float 。它必须在桌面上显示为表格是有原因的。

Answer 1

您可以使用 flexbox model 来做到这一点.新的 flexbox 模型是 not yet widely supported (尤其是旧浏览器，因为规范最近发生了变化)，但由于您提到它适用于智能手机，因此此解决方案可能会为您解决问题。

我相信大多数智能手机浏览器都会支持这种解决方案，我不太确定的一个浏览器是Windows Phone 8的IE10版本，IE10确实支持这种方法，但我不确定Windows Phone 8版本的IE10 的行为与桌面版完全相同。

在包含元素上设置各种前缀的 display 属性值和 flex-direction 属性可确保容器在列方向上表现得像一个 flexbox 。

在 .cell1 上将各种前缀的 order 属性设置为 1 确保 0 的初始值.cell1 被覆盖，因此它将 cell1 按顺序推到 .cell2 之后，因为它的顺序值高于 cell2 的订单值(仍然等于其初始值 0)。

这是一个 jsFiddle 演示这种方法。

CSS:

.table {
    display: table;
}

.table .cell1, .table .cell2 {
    display: table-cell;
}

@media (max-width: 480px) {

    .table {
        display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    .table .cell2, .table .cell1 {
        width: 100%;
        display: block;
    }

    .table .cell1 {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
}