Переупорядочить ячейки таблицы 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: left и float: right, но не работает.

PS

Я не могу просто удалить макет таблицы и использовать только поплавки. Существует причина, по которой он должен отображаться в виде таблицы на рабочем столе.

Answer 1

Вы можете сделать это с помощью flexbox model. Новая модель flexbox - not yet widely supported (особенно не по старым браузерам, поскольку спецификация недавно изменилась), но поскольку вы упоминаете, что она предназначена для работы на смартфонах, это решение может сделать трюк для вас.

Я считаю, что большинство браузеров для смартфонов будут поддерживать это решение, тот браузер, о котором я не очень уверен, является версией IE10 для Windows Phone 8, IE10 поддерживает этот подход, но я не уверен, что версия Windows Phone 8 IE10 ведет себя точно так же, как и настольная версия.

Установка значения свойства префикса display и свойства flex-direction на содержащем элементе гарантирует, что контейнер ведет себя как гибкая коробка в направлении столбца.

Установка по-разному приставка order свойства 1 на .cell1 гарантирует, что начальное значение 0 на .cell1 переписывается, и поэтому он толкает в порядке cell1 мимо .cell2, так как его стоимость заказа превышает cell2 «s значения заказа (который по-прежнему равен его начальному значению 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; 
    } 
}