[CSS] -swap-строка при предварительном просмотре на мобильном устройстве

Question

Я не использую никаких фреймворков, таких как bootstrap, который предоставляет классы, такие как push или pull, для достижения того же, чего я хочу достичь. То, что я хочу знать с помощью базового css, может сделать трюк для замены элементов, которые на рабочем столе видят один под другим, но при просмотре на мобильном устройстве этот порядок изменяется.

HTML

<div id='cover'> 
    <div> 
    <p>This is first row</p> 
    </div> 
    <div> 
    <p>This is second row</p> 
    </div> 
</div> 

CSS

#cover div{ 
    background-color: #f3f3f3; 
    border: 1px solid black; 
    text-align: center; 
} 

В рабочем столе, он будет показывать что-то вроде:

Это первый ряд

Это вторая строка

В подвижны, он должен поменять и показать, как:

Это вторая строка

Это первая строка

Answer 1

вы можете использовать Flexbox , как это (внутри медиа-запроса для мобильных устройств):

#cover div{ 
    background-color: #f3f3f3; 
    border: 1px solid black; 
    text-align: center; 
    display: flex; 
    flex-direction: column-reverse 
} 

и flex-direction: column для настольной версии

Вот codepen: http://codepen.io/anon/pen/GZeRQq

Answer 2

EDIT:

Хотя мой метод действительно работает, я предложил бы использовать @ решение Johannes в

Вот как используйте его с запросом на медиа.

#cover { 
    background-color: #f3f3f3; 
    border: 1px solid black; 
    text-align: center; 
    display: flex; 
    } 

    @media screen and (max-width: 1000px) { 
    #cover { 
     flex-direction: column-reverse; 
    } 
    body { 
     background: orange; 
    } 
    } 

    @media screen and (min-width: 1001px) { 
    #cover { 
     flex-direction: column; 
    } 
    body { 
     background: blue; 
    } 
    } 

Оригинал сообщения:

Если вы хотите чистое решение CSS ваш лучший выбор (я думаю) использует дисплей: настольный

Посмотрите this fiddle и изменение размеров окна результатов, фон будет меняться слишком просто, чтобы вы не пропустите :-)

#cover { 
 
    display: table; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 

 
#cover div { 
 
    background-color: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .first { 
 
    display: table-footer-group; 
 
    } 
 
    .second { 
 
    display: table-header-group; 
 
    } 
 
    body { 
 
    background: orange; 
 
    } 
 
} 
 

 
@media screen and (min-width: 601px) { 
 
    .first { 
 
    display: table-header-group; 
 
    } 
 
    .second { 
 
    display: table-footer-group; 
 
    } 
 
    body { 
 
    background: blue; 
 
    } 
 
}

<div id='cover'> 
 
    <div class="first"> 
 
    <p>This is first row</p> 
 
    </div> 
 
    <div class="second"> 
 
    <p>This is second row</p> 
 
    </div> 
 
</div>