flex-boxでPCとスマホでdivの順番を入れ替える

PCとスマホで（レスポンシブ）でdiv要素の順番を入れ替えたい。

そんなときのメモになります。

<div class="order">
    <div class="item1">1</div>
    <div class="item2">2</div>
</div>

</div>

@media (max-width: 768px) {
.order { display: flex; flex-flow: row wrap; }
.order .item1 { order: 2; }
.order .item2 { order: 1; }
}

@media (max-width: 768px) {

.order { display: flex; flex-flow: row wrap; }

.order .item1 { order: 2; }

.order .item2 { order: 1; }

}

flex-boxを使って順番を変更しています。
ちなみにブレークポイントを768pxとしています。

illustration by Ouch.pics