スマホ時に上下逆転

2025年12月10日

サンプル

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

作成するための要素

ブロック要素

<!-- wp:columns {"className":"u-mb-ctrl u-mb-60 reverse"} -->
<div class="wp-block-columns u-mb-ctrl u-mb-60 reverse"><!-- wp:column {"width":"50%","className":"is-reverse"} -->
<div class="wp-block-column is-reverse" style="flex-basis:50%"><!-- wp:paragraph -->
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","className":"is-reverse"} -->
<div class="wp-block-column is-reverse" style="flex-basis:50%"><!-- wp:paragraph {"className":"animated fadeInLeft delay-200ms"} -->
<p class="animated fadeInLeft delay-200ms">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

CSS

@media screen and (max-width: 781px) {
 .reverse {
   flex-direction: column-reverse!important;
 }
}

Javascript

なし

備考等

クラス名にinfiniteLoopを指定