Bulmaで2カラムレイアウトをするときPC表示の時だけ左右逆に表示する方法

Bulmaを使っていると、画像とテキストを2カラムで
横並びのレイアウトにするのが簡単で便利ですが、
スマホ表示では作成したカラム順で上から表示されてしまいます。

PC表示ではテキストを左、画像を右にしたいが、
スマホでは画像が上になっている方がいい時ってありますよね。
現時点（v0.7.1）ではBulmaのデフォルトのクラスに逆順がないので、
表示順を逆にするクラスを作っておくと便利です。

スマホで表示させたい順にコーディングする

HTMLのソースはスマホで見たときに表示させたい順番でコードを書きます。
画像、テキストの順に書きます。

このままだとPCで表示させたときには
左側：画像
右側：テキスト
です。

ここで、columnsクラスのdivにもう一つクラス「reverse-row-order」を追加します。

HTML

<div class="columns reverse-row-order">
  <div class="column is-6">
    <figure class="image is-3by2"><img src="#"></figure>
  </div>
  <div class="column is-6">
    テストテストテスト、テストテストテスト、テストテストテスト、テストテストテスト、テストテストテスト、テストテストテスト、テストテストテスト、テストテストテスト
  </div>
</div>

CSS

.reverse-row-order {
  flex-direction: row-reverse;
}