HTMLの記述を変えずに表示順を変えるCSS

とても初歩的な質問で恐れ入りますが、どのサイトを見てもうまく適応されなかったため教えていただけると幸いです

●pc版の配列

写真①　テキスト②
テキスト③　写真④

●これをレスポンシブ対応させた時にこうしたい
写真①
テキスト②
写真④
テキスト③

●でもこのまま適応されない
写真①
テキスト②
テキスト③
写真④

そのためのcssの記述です。
下記htmlコード一部抜粋です。

<div class="about">
        <div class="about-area">
          <img src="#" alt="写真" > 写真　①
          <div class="about-text ">　テキスト　②
            <h3>saevdfbvdfdfvd</h3>
            <p>df fs sdfgsdf asgkenr saevdfbvdfdfvdfbsdfbsdfb
               sd dfbsdf dfbsdfb sdfbsdfvdf;o;oa;sdkv;a v;aldk
               vndf fs sdfgsd asgkenr saevdfbvdfdfvdfbsd</p>
          </div>
        </div>
        <div class="about-area">
          <div class="about-text">　テキスト③
            <h3>saevdfbvdfdfvd</h3>
              <p>df fs sdfgsdf asgkenr saevdfbvdfdfvdfbsdfbsdfb
                sd dfbsdf dfbsdfb sdfbsdfvdf;o;oa;sdkv;a v;aldk
              vndf fs sdfgsd asgkenr saevdfbvdfdfvdfbsd
              fbsdfbsd dfbsdf dfbsdfb sdfbsdfvdf;o;o a;sdkv;a</p>
          </div>
          <img src="#"" alt="写真">　写真④
       </div>
 </div>