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

前提

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

実現したいこと

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

該当のソースコード

html

<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>

css

.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では画像の下で移動するので他に必要なコードがあるのでしょうか？