ページ内目次

スタイルシートからブロックの順序を入れ替える

cssは編集可能で、htmlソースに手を加えたくない、もしくは手を加えられないような場合って以外とあると思います。

そのような場合にhtmlソースをそのままで、スタイルシートに手を加えることで、ブロックの順序(表示位置)を変えることが可能です。

PCは左右に振り分けて表示で、スマホは全幅にしてPCと並び順を変えるなんてことが可能です。

<div id="container">
  <div id="block1"></div>
  <div id="block2"></div>
</div>
#container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

@media (max-width: 767px) {
#block1 {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
}
#block2 {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}
}

こんな感じですね。

これで、PCのときはblock1、block2の順ですが、スマホではblock2、block1の順に表示されます。

フレックすって便利っす…

↑上へまいりま〜す