PCでの表示が以下の場合
【左の列】【右の列】
スマホやタブレットでは、以下のように表示されるはずです。
【左の列】
【右の列】
これを、
【右の列】
【左の列】
のように表示させる方法です。
以下サンプルです。
なお、この方法は「nocodeweb.jp」を参考にさせてもらっています。
いつも有益な情報をありがとうございます。
この行は特に何もしていません。
モバイル表示の際は、通常通りサラダの画像が上でこの文章が下に表示されるはずです。
この行の順番を入れ替えます。
まず行の「詳細」タブ→「CSSIDとクラス」→「CSSクラス」に「mxn_custom_row」を追加。
更にこの文章の列の「CSSクラス」に「mxn_mobile_order2」を右のハンバーガーの画像の列に「mxn_mobile_order1」を追加する。
以下のCSSをダッシュボード→「Divi」の一番下、「カスタム CSS」に貼り付けます。
後は上の例にあるように、行と列にクラスを追加します。
後は上の例にあるように、行と列にクラスを追加します。
CSS
@media all and (max-width: 980px) {
.mxn_custom_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
/*** カスタムCSSクラスで、デスクトップ以外の列のオーダーを決定 ***/
.mxn_mobile_order1 {
-webkit-order: 1;
order: 1;
}
.mxn_mobile_order2 {
-webkit-order: 2;
order: 2;
}
.mxn_mobile_order3 {
-webkit-order: 3;
order: 3;
}
.mxn_mobile_order4 {
-webkit-order: 4;
order: 4;
}
/*** 最後の列にマージンを追加 ***/
.custom-row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
}