【Lightning】[メディアとテキスト オフセット背景_グラデーション使用]のスマホ表示時に「画像が上／テキストが下」に並び替えたい時のCSS

VK パターンライブラリ「メディアとテキスト オフセット背景_グラデーション使用」を使うと、パソコン用のレイアウトではサンプルで２つ（画像が右か、画像が左か）選べるようになっていますが、スマホレイアウトではいずれも「画像が下」になってしまいます。

▼PCレイアウト

▼スマホレイアウト（画像が下）

スマホレイアウトの時に、「画像を上/テキストを下」に反転させる方法です

親カラムを選択⇒CSSに記述

①親カラムを選択

まずは、編集ページの上「三本線」⇒ブロックのツリーを表示⇒該当ブロックの「親カラム」を選択（その中に子カラムが２つあるので間違えないように）

②カスタムCSSに記述

右側のブロック欄に「カスタムCSS」という欄がありますので、そこにこちらを記述するだけ

@media (max-width: 767px) {
  /* 1番目のカラム（テキスト）を下へ、2番目のカラム（画像）を上へ */
  selector > *:first-child { order: 2; }
  selector > *:last-child  { order: 1; }
}

これで、スマホ時に画像とテキスト「上下反転」したと思います。以上簡単でした。