web-dev-qa-db-ja.com

Bulma：列のスタック順序を変更する

モバイルまたはタブレットで列のスタック順序を変更するにはどうすればよいですか？

たとえば、以下のコードはワイド画面で要素を水平に表示しますが、縮小した場合は2を上にします。それを行うためにhtml構造を変更したくありません。

例を以下に示します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>
cssbulma
11
shigg

現在の時点で bulma バージョンv0.3.1、列の順序を変更する機能はありません。

ただし、カスタムスタイルを定義して、モバイル、タブレット、または任意の解像度の順序を変更できます。

カスタムクラスを定義できます.reverse-columnsたとえば、次のスタイルで親に追加します。

@media(max-width: 767px) { /* <== You can change this break point as per your  needs */
  .reverse-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");

@media(max-width: 767px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}
<div class="columns custom-columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>
20
Mohammad Usman