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の順に表示されます。
フレックすって便利っす…