メディアクエリを使用してHTMLを並べ替えるにはどうすればよいですか？

Question

div要素の位置[表示されたドキュメントの順序]をメディアクエリで変更します。

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

私は私のビューポートを変更すると、私はdiv_2下div_1滞在したいです。上部には基本的にdiv_1です。しかし、私はそれをメディアクエリで変更したい。それは可能ですか？

Answer 1

使用flexboxとそのorder財産

あなたにも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>

あれば同じ結果を得ることができますが、私は、.wrapperをお勧めします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>