【Lightning】スマホでカラムの順番を入れ替える方法（右→左に反転）

通常、カラムブロックを使った場合、
PCの左がスマホで上、
PCの右がスマホで下になる。

ただし、デザインの都合で、スマホで見た時は「左右逆にしたい場合」が出てくる

例えば、PCでは「左にテキスト、右に画像」の並びにしたいけど、スマホだと「上に画像」を持ってきたい場合などである。

【やり方】カスタムCSSに下記コードを追加

とりあえず結論から言うと、CSSにこちらを追記する

@media (max-width: 767px) {
  /* 1番目を下へ、2番目を上へ */
  selector > *:first-child { order: 2; }
  selector > *:last-child  { order: 1; }
}

１）カラム全体を選択する

まず、カラムを作ったら、ツールバーの一番左
「親ブロックを選択」をクリックして「カラム全体を選択」モードにする

２）カスタムCSSに記述

Lightningには、ブロック単体にCSSを記述できる「カスタムCSS」というのがある。

そこにこちらを記述

@media (max-width: 767px) {
  /* 1番目を下へ、2番目を上へ */
  selector > *:first-child { order: 2; }
  selector > *:last-child  { order: 1; }
}

▼完成見本がこちら