Reorder div table-cells using media queries - css

Question

I have a div table with two cells. Now I want to show the second cell at the top and the first cell at the bottom of page, when my page is displayed on a smartphone:
<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?
}
I tried to add float properties like float: left and float: right, but it doesn't work.
PS
I cannot just remove table layout and only use floats. There is a reason it must be displayed as table on desktop.

Answer 1

You can do this with the flexbox model. The new flexbox model is not yet widely supported (especially not by older browsers, as the specification has changed recently), but since you mention that it is meant to work on smartphones, this solution might do the trick for you.
I believe most smartphone browsers would support this solution, the one browser which I am not so sure about is Windows Phone 8's version of IE10, IE10 does support this approach, but I'm not sure if the Windows Phone 8 version of IE10 behaves exactly the same as the desktop version.
Setting the variously prefixed display property value and the flex-direction property on the containing element ensures that the container behaves like a flex box in a column direction.
Setting the variously prefixed order property to 1 on .cell1 ensures that the initial value of 0 on .cell1 is overwritten, and therefore it pushes cell1 past .cell2 in the order, as its order value is higher than cell2's order value (which is still equal to its initial value of 0).
Here's a jsFiddle demonstrating this approach.
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;
}
}