ともにCSSのみで実現可能です。【CSS】要素の順番の入れ替え方法について縦組みの要素をCSSで入れ替えるまずは上下の順番の入れ替えからです。PCとスマホで順番を入れ替えたい場合などですね。例として、以下のような要素を入れ替えます。12上下方向の入れ替えの場合、CSSのdisplayプロパティのgridキーワードを使用します。それぞれの箱の親要素にgridとgrid-template-rowsを、それぞれの箱にgrid-rowを設定します。親要素をparent、子要素をone、twoとする場合、HTMLとCSSの並びは以下のようになります。50%;}div.one{grid-row:2/3;}div.two{grid-row:1/2;}以上を適用させると、結果は以下のようになります。12上下の順番を入れ替えることが出来ましたね。displayプロパティのgridキーワードの仕様については以下の記事で詳細に解説しているので、こちらも参考にしてください。【CSS】display要素のgridキーワードの使い方CSS3で登場したdisplay要素の新キーワードgridについてのまとめです。大枠に「display:grid」を指定[...]左右の要素をCSSで入れ替える場合さて、次は左右を入れ替える場合です。こちらは上下を入れ替えるよりも簡単です。そもそも、要素を左右に並べるには「display:flex」を使用することが多いですよね。以下のように左右に並べる場合、親要素に「display:flex」を指定すればOKです。12これで要素は横並びです。ここから要素の順番を入れ替えるのは簡単です。row-reverse;」を指定してあげてくださいそれだけで、上記の結果は以下のようになります。12左右の順番が入れ替わったことが分かりますね。覚えておくと役立つかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。date*日本語が含まれない投稿は無視されますのでご注意ください。propertyWebAPPエンジニア→クラウドソーシング→フリーランスと様々なことを経験してきました。今はwebのモノヅクリしながらブログで色々技術情報開示してます。使用する言語→HTML/CSS/jQuery/PHP/Java/Oracle/Django..etc塾講師だったことがあるので、分かりやすく、詳細な説明を意識しています。