WordPress Lightning メディアと文章でモバイル時の画像と文章表示を逆にしたい

Question

「画像：文章」「文章：画像」とメディアを左右になるようにページを作成しています。
モバイル表示では縦に並べるに設定しており、このままモバイル表示にすると、
「画像：文章：文章：画像」となってしまいます。
モバイル表示では縦に表示なので、そうなるのは当然かと思いますが、
モバイル表示のときだけ、「画像：文章」「画像：文章」とし、きれいに表示させる方法がわかりません。
ご教授いただけますと幸いです。

Answer 1

HTMLやCSSをご提示頂きませんと正確にお答えできないのですが、こんな風にすると思います。

以下コードでjsfiddleのサンプルをご用意しましたので、幅をうにょうにょ動かしながら確認してみてください。

<ul>
  <li>
    <img src="http:placehold.jp/100">
    <p>文章</p>
  </li>
  <li>
    <img src="http:placehold.jp/100">
    <p>文章</p>
  </li>
</ul>

/* 初期設定 */
ul,li {
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  color: white;
}

/* 左右に並べる */
li {
    display: flex;
    margin: 10px;
    padding: 10px;
    background: black;
}

/*　0pxから480pxまで　*/
@media screen and (min-width:0px) and ( max-width:480px) {

}
/*　480px以上　*/
@media screen and (min-width:480px) {
  /* 親要素がflexのとき、orderで順番を指定できる */
  li:nth-child(2n) p {
    order: 0;
  }
  li:nth-child(2n) img {
    order: 1;
  }
  /* ulを左右に並べる */
  ul {
    display: flex;
  }    
}

Comments

[nikumankun]

回答ありがとうございます。
テーマ編集できるようにCCSをもう一度勉強してまいります。