WordPress floatで並べた画像がスマホサイズになると一枚目だけレスポンシブされない

Question

【状況・希望】
・WordPressを使用しています
・二枚の画像を横並びにし、スマホサイズでは縦に並ぶようにさせたい
・float leftを使用し、横には並び、スマホサイズでも縦に並んだのですが、
その際、2枚目の画像のみ自動でレスポンシブされ、1枚目は画像サイズが自動で調整されません。
・1枚目の画像サイズの調整がなぜ自動で効かないのか、何か記述をする必要があるのか
ご教示いただけますと幸いです。

【htmlの記述】

<p style="float:left;"><img src="ooo.png"></p> <p><img src="ooo.png"></p> <div style="clear: both;"> </div>

【試したこと】
各画像にwidthを設定したり、<p>を<div>で囲い、divのwidthを100％にしたのですが上手くいかず・・・

現在勉強中で、初歩的な質問で申し訳ありません。どうか、よろしくお願いいたします。

Answer 1

動作サンプル

flexでやるとこうなります。

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.container > div {
  flex-grow: 1;
  flex-basis: 375px;
}
.w100p {
  width: 100%;
}
</style>
<div class="container">
  <div>
    <img class="w100p" src="ooo.png" />
  </div>
  <div>
    <img class="w100p" src="ooo.png" />
  </div>
</div>

Answer 2

下記でしょうか？
切り替えのwidthと画像の周りの余白はお好みで。

<div>
<p><img src="ooo.png"></p>
<p><img src="ooo.png"></p>
</div>

div {
 clear:both;
}
p {
 float:left;
 width:50%;
}
img {
 text-aling:center;
 width:100%;
}

@media screen and (max-width:768px) {
　p {
　 float:none;
 　width:100%;
　}
}