【Bulma】Bulmaでカラムを逆配置にする方法【備忘録】

Bulmaでカラムを逆配置にしようと思ったときに想像以上に調べることになったのでメモです。

ユーザビリティ悪くなるから、非推奨です。

ですが、左側にカラムを配置して、スマホ時にメイン記事の下にしたいこともあると思いますので…

Bulmaでrow-reverseを使う

Bulmaは知っての通りflexboxで配置をしています。

なので、flexboxの逆配置をするCSSを追加してあげればおｋです。

しかし、

Bulmaにはflex-direction:row-reverseを設定しているクラスがありません。

というわけで作りましょう！

.kadlu-row-reverse{
    flex-direction:row-reverse
}

<div class="columns kadlu-row-reverse">
    <div class="column has-background-primary">
        <p>マークアップでは上(スマホ時も上)</p>
    </div>
    <div class="column has-background-info">
        <p>マークアップでは下(スマホ時も下)</p>
    </div>
</div>

ブラウザをスマホモードにして確認してみてください。

(ChromeならF12を押して、デベロッパーモード上でshiftctrlmです)