CSSでのレイアウト順変更について悩んでいます

既出・回答ありましたら申し訳ありません。

CSSでレスポンシブレイアウトのサイトを組んでいます。
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。

上図の左側がPC表示時、右側がスマホ表示時になります。
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。

<div>
　<div style="float:left;">
　　<p>A</p>
　　<p>B</p>
　</div>
　<div style="float:right;">
　　<p>C</p>
　</div>
</div>

簡単に書くと上記構造になっています。
この構造でCをスマホ時に2番目に表示する方法がどうしてもわかりませんでした。

floatを使わずpositionで絶対表示にし、ordinal-groupで並べ替える方法も考えてはみたのですが、AとBの高さが可変である為、巧く行きませんでした。

どなたか、解決方法ご教授頂けませんでしょうか？
宜しくお願い致します。