CSSで要素の順番を変更する方法はありますか？


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

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

![レイアウト変更](https://i.stack.imgur.com/ECt9V.jpg)

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

[code]

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

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

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

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




かなり hacky + 綺麗に見せるにはもう何手間か要ると思いますが、トップ要素を `relative` にし、 B を `absolute` にして
`top: 100%` とすることで C の下に配置できます。 トップ要素には A と C だけが格納され、その下に B
の上部を設定するイメージです。あとは下記のコードを試してみてください。

[code]

    /* この回答のキモ */
    .root {
        position: relative;
    }
    .B {
        position: absolute;
        top: 100%;
        width: 100%;
    }
    
    /* それっぽく見せるための装飾 */
    .A {
        background-color: #ffcccc;
        height: 100px;
    }
    .B {
        background-color: #ccffcc;
        height: 200px;
    }
    .C {
        background-color: #ccccff;
        height: 400px;
    }
    div {
        margin: 0;
        padding: 0;
    }
[/code]

[code]

    <div class='root'>
        <div>
            <div class='A'>A</div>
            <div class='B'>B</div>
        </div>
        <div>
            <div class='C'>C</div>
        </div>
    </div>
[/code]




かなり hacky + 綺麗に見せるにはもう何手間か要ると思いますが、トップ要素を `relative` にし、 B を `absolute` にして
`top: 100%` とすることで C の下に配置できます。 トップ要素には A と C だけが格納され、その下に B
の上部を設定するイメージです。あとは下記のコードを試してみてください。

[code]

    /* この回答のキモ */
    .root {
        position: relative;
    }
    .B {
        position: absolute;
        top: 100%;
        width: 100%;
    }
    
    /* それっぽく見せるための装飾 */
    .A {
        background-color: #ffcccc;
        height: 100px;
    }
    .B {
        background-color: #ccffcc;
        height: 200px;
    }
    .C {
        background-color: #ccccff;
        height: 400px;
    }
    div {
        margin: 0;
        padding: 0;
    }
[/code]

[code]

    <div class='root'>
        <div>
            <div class='A'>A</div>
            <div class='B'>B</div>
        </div>
        <div>
            <div class='C'>C</div>
        </div>
    </div>
[/code]

