HTML
CSS

【レスポンシブ】PCとスマホでdivの順番を入れ替える

More than 1 year has passed since last update.

はじめに

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

赤いセルを右上に表示
pc.png

スマホ

赤いセルを一番下に表示
sp.png