WordPressテーマSANGOの質問

横並び2列のスマホ表示順

アバター
もび

横並び2列で左を画像、右をテキストにするとスマホでは上に画像、下にテキストと表示されますが、このスマホ表示の順番を逆にすることは可能でしょうか。

SANGOのショートコード一覧
SANGOのショートコード一覧
コメントへの回答
サルワカくん
サルワカくん
2021/05/31

お世話になっております。以下のようなCSSを記述すれば可能ですが、全ての同じショートコードに対して適用されてしまいますのでご利用には注意が必要そうです。


@media only screen and (max-width: 767px) {
  .shtb2.tbrsp {
     display: flex;
     flex-direction: column;
  }
  .shtb2 tbrsp .cell:nth-child(1) {
    order: 2;
  }
  .shtb2 tbrsp .cell:nth-child(2) {
    order: 1;
  }
}

よろしくお願いします。