モバイルで「画像→説明」の順番をそろえるには、編集時点で各カラムをその順に配置します。
PCで左右を入れ替えたい行だけにクラスを付け、見た目を反転させます。
ページ内の何番目かを数えるnth-childには依存しません。
画像を先に置き、反転する行だけ指定する
標準のカラムブロックを2列で作り、最初のカラムに画像、次のカラムに説明を入れます。
「モバイルでは縦に並べる」を有効にしてください。
PCで画像を右に出す行では、2つの子カラムをまとめる親の「カラム」ブロックだけに、追加CSSクラス waza-image-first-desktop-reverse を設定します。
.wp-block-columns.waza-image-first-desktop-reverse {
display: flex;
flex-direction: column;
gap: 2em;
}
.wp-block-columns.waza-image-first-desktop-reverse > .wp-block-column {
min-width: 0;
flex: 1;
}
@media (min-width: 782px) {
.wp-block-columns.waza-image-first-desktop-reverse {
flex-direction: row-reverse;
}
}変更前のCSSとブロック構成を保存してから、追加CSSまたは子テーマのstyle.cssへ記述します。
親テーマのファイルは直接編集しません。
旧記事の .wp-block-columns:nth-child(odd) による全体反転は併用しません。
標準の782px境界を想定しているので、独自にブレイクポイントを変更している場合は値をそろえてください。
表示例：画像側をPCで右、スマホで先に表示する
画像を置く側（本文では先）
説明を置く側（本文では後）
同じ表示例をPC相当とスマートフォン相当の幅で撮影したものです（2026年10月1日）。
見本は画像を置く側と説明を置く側を文字で示した構成です。
実画像の比率や長い本文を入れた場合は、導入先でも配置を確認してください。
見た目の順序と読み上げ順は別
row-reverseは見た目の配置を変えるだけで、DOM・読み上げ・キーボードの移動順を入れ替えません。
手順や順位など順序自体に意味がある内容には使わず、説明に必要な画像には代替テキストを設定してください。
左右両方にリンクや入力欄がある場合は、Tab移動が見た目と矛盾しないか確認します。
スクリーンリーダーによる実操作と、編集画面で保存して再表示する手順は未検証です。
390px・781pxで画像側が上、782px以上で右になることを確認します。
戻す場合は反転クラスと今回のCSSを外してください。
境界を変更する場合はカラムのブレイクポイント変更も参照してください。
