cssでの並び替え

[code]

    <div class="image"></div>
    <div class="sentence"></div>
    
[/code]

上記でPC向けにサイトを作った後、スマホ用にレスポンシブ対応することになったのですが  
.imageを.sentenceの下に潜り込ませるにはどうすればいいでしょうか




論理構造が逆になることが許容範囲であれば、以下で可能です。

このソースの肝は、

  * PC用ではおそらく画像の縦横が固定なところを利用する
  * HTMLの記述をスマホ用にする
  * CSSをPC用に記述（Media Queryなどを用いる）

[code]

    .wrapper {
      position: relative;
    }
    
    .images {
      position: absolute;
      top: 0;
    }
    
    .sentence {
      padding-top: 150px; /* 画像の高さ */
    }
[/code]

[code]

    <div class="wrapper">
      <div class="sentence">Lorem ipsum</div>
      <div class="images"><img src="https://placehold.jp/150x150.png" alt=""></div>
    </div>
[/code]

