【レスポンシブ】PCとスマホでdivの順番を入れ替える
はじめに
flex-boxを使います。
スマホ（タブレット）のブレークポイントを768pxとしています。
Html
<div class="main">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
CSS
.main{
display: flex;
flex-flow: row wrap;
}
.main div{width: 50%;}
.main .item1{order: 1;}
.main .item2{order: 3;}
.main .item3{order: 4;}
.main .item4{order: 2;}/*このセルの位置を操作*/
@media (max-width: 768px) {
.main{display: block;}
.main div{width: 100%;}
}
表示
PC
<div class="main">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
.main{
display: flex;
flex-flow: row wrap;
}
.main div{width: 50%;}
.main .item1{order: 1;}
.main .item2{order: 3;}
.main .item3{order: 4;}
.main .item4{order: 2;}/*このセルの位置を操作*/
@media (max-width: 768px) {
.main{display: block;}
.main div{width: 100%;}
}
表示
PC
赤いセルを右上に表示
スマホ
赤いセルを一番下に表示
Author And Source
この問題について(【レスポンシブ】PCとスマホでdivの順番を入れ替える), 我々は、より多くの情報をここで見つけました https://qiita.com/saksak/items/6ade0be65ad83733e993著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .