Как я могу переупорядочить HTML, используя медиа-запросы?

Question

Я хочу изменить позицию элемента div [в порядке просмотра документа] по запросу мультимедиа.

<div>1</div> 
 
<div>2</div>

Когда я изменить окно просмотра, то я хочу div_1 пребывания под div_2. В основном div_1 наверху. Но я хочу изменить его по запросу Media. Можно ли ???

Answer 1

Использование flexbox и его свойство order

Я рекомендую .wrapper, хотя вы можете использовать его на body, а также и получить тот же результат

@media screen and (max-width: 800px) { 
 
    .wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .wrapper div:first-child { 
 
    order: 1; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
</div>

Если flexbox не является вариантом, вы можете использовать display: table

@media screen and (max-width: 800px) { 
 
    .wrapper { 
 
    display: table; 
 
    width: 100%; 
 
    } 
 
    .wrapper div:nth-child(1) { 
 
    display: table-footer-group; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
</div>