Css 使用媒体查询对div表单元格重新排序

我有一张有两个单元格的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?
}

.桌子{
显示：表格；
}
.表1，
.表2{
显示：表格单元格；
}
@介质（最大宽度：480px）{
.表1，
.表2{
宽度：100%；//在智能手机上必须为全宽
显示：块；
}
//如何在顶部显示cell2，在底部显示cell1？
}

我尝试添加浮点属性，如

float:left

和

float:right

，但它不起作用

PS

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

您可以使用。新的flexbox模型是（特别是不适用于较旧的浏览器，因为规范最近发生了变化），但由于您提到它适用于智能手机，此解决方案可能会为您带来好处

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

在包含元素上设置不同前缀的

display

属性值和

flex direction

属性可确保容器在列方向上的行为类似于弹性框

将不同前缀的

order

属性设置为

.cell1

上的

1

可确保

上的
0
的初始值被覆盖，因此它按顺序将
cell1
推过
.cell2
，因为其顺序值高于
cell2
的顺序值（仍然等于其初始值
0
）

下面是一个演示这种方法的示例

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

与order属性不同，box ordinal group属性从1开始索引，所以使用1实际上根本不会对元素重新排序。