css - Reorder div table-cells using media queries -

i have div table 2 cells. want show second cell @ top , first cell @ bottom of page, when page displayed on 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 full width on smartphones         display: block;     }     // how display cell2 @ top , cell1 @ bottom? } 

i tried add float properties float: left , float: right, doesn't work.

ps

i cannot remove table layout , use floats. there reason must displayed table on desktop.

you can flexbox model. new flexbox model not yet supported (especially not older browsers, specification has changed recently), since mention meant work on smartphones, solution might trick you.

i believe smartphone browsers support solution, 1 browser not sure windows phone 8's version of ie10, ie10 support approach, i'm not sure if windows phone 8 version of ie10 behaves same desktop version.

setting variously prefixed display property value , flex-direction property on containing element ensures container behaves flex box in column direction.

setting variously prefixed order property 1 on .cell1 ensures initial value of 0 on .cell1 overwritten, , therefore pushes cell1 past .cell2 in order, order value higher cell2's order value (which still equal initial value of 0).

here's jsfiddle demonstrating 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;     } }