PCとスマホで画像につけるテキストの位置を変えたい

Question

前提

記載したコードでfloatを使いPCでは画像の横にテキストがくるようにしました。

実現したいこと

スマホではsubtitle-rとkdwr-text-1のテキストが画像の上にくるようにしたいです。

該当のソースコード

      <div class="kodawari-point">
        <div class="kodawari-img-r"><img src="img/benefit_point1.jpg" alt=""><p class="kit">○○○○○</p></div>
        <div class="kdwr_description">
          <h3 class="subtitle-r subheading">△△△△</h3>
          <div class="kdwr-text-1">
            <p><span class="hr">□□□□</span><br>□□。<br>□□□<br>□□</p>
          </div>
        </div>
      </div>

.kodawari-img-r {
  float: right;
  margin: 0 7vw 0 5vw;
  text-align: center;
}

.kodawari-img-l {
  float: left;
  margin: 0 5vw 0 10vw;
  text-align: center;
}

.kdwr-text-1 {
  padding: 0vw 5vw 10vw 7vw;
  line-height: 3.5vw;
}

.kdwr-text-2 {
  padding: 0 0 10vw 5vw;
  line-height: 3.5vw;
}

.hr {
  border-top: 1px solid #212529;
  padding-top: 4px
  }


 .kodawari-point .kit {
   font-size: 1.8vw;
 }

試したこと

float: none;は記載しましたが、その後どうテキストを動かせばいいかわかりません。
paddingやmarginでは画像の下で移動するので他に必要なコードがあるのでしょうか？

Comments

[m.ts10806]

まずは「スマホの場合の何かしらの指定」を試すところからではないでしょうか（例えば背景色のような明らかにわかるものから）。
現状だとどんなデバイスでも無関係になっています。
レスポンシブ対応したいのかユーザーエージェントで動的に判断したいのかによって全然方法は違いますが。

Answer 1

画像の方にfloat: none;を書いていたのですが、テキストの方につけたしmarginで画像の上に移動できました。