BlueBear

WEB屋の雑記ブログ

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

2019年 8月 15日  2019年 8月 20日

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

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

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

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

Bulmaでrow-reverseを使う

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

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

しかし、

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

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

CSS

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

HTML

<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です)

ライター情報

七堂 結衣

教師→WEBデザ→フロントエンジニア

WEBマーケやWEBマスタも兼任。SNS広告で一発当てたことも…

フロント系技術を中心としたメモ書きとWEBやアフィリエイトの情報を発信しています

更新は不定期

関連記事

【Bulma】Bulmaで追尾するメニューを作る方法【備忘録】
【Bulma】Bulmaで追尾するメニューを作る方法【備忘録】

Bulmaで画面の上部ま行ったら固定されるメニューを作ろうと思って position:sticky;を調べたので備忘録 Bulmaでpositi

【AMP】Font Awesomeが表示されない?【備忘録】
【AMP】Font Awesomeが表示されない?【備忘録】

AMPでFont Awesomeを使うときにハマってしまったので、メモです。 Font Awesome5のJS認証やめてくれませんかね? 結論 Font Aweso

【AMP】GoogleMapなどのiframeを埋め込む方法
【AMP】GoogleMapなどのiframeを埋め込む方法

iframeを入れる方法です。 といっても、iframeをamp-iframeに変えるだけなんですが… amp-iframeを使ってGoogle

【AMP】amp-imgをクリックを無効にする【備忘録】
【AMP】amp-imgをクリックを無効にする【備忘録】

AMPで大きなサイズの画像を使ってヘッダーなどを作っていたのですが、 クリックして、ギャラリーモードになってしまう不具合があったのでメモ書きで