html - 最小限のマークアップ変更で 3 列レイアウトから 2 列レイアウトへ

Question

私が管理しているアプリでは、iPad フォーム ファクターの変更 (スタイリング言語) をあまり実装していません。これを処理するためにメディア クエリをセットアップしましたが、マークアップを動作させるのに少し問題があります。

現在、「通常の」フォーム ファクタでは、3 列のレイアウトになっています。

*---*-----*---*
| A |  B  | C |
*---*-----*---*

<div class="lft-side-panel">
    A
</div>

<div class="ctr-panel">
    B
</div>

<div class="rt-side-panel">
    C
</div>

.lft-side-panel {
    .span4();   // 4/16 slots wide
    margin-left: 0;
    left: 0;
}

.ctr-panel {
    .span8();
}

.rt-panel {
    .span4();
}

ただし、これらの小さいフォーム ファクターにはサイズの制約があるため、次のように 2 列のセットアップを試みています。

*---*---------*
| A |         |
*---*    B    |
| C |         |
*---*---------*

<div class="lft-side-panel">
    A
</div>

<div class="ctr-panel">
    B
</div>

<div class="rt-side-panel">
    C
</div>

/* These appear to be where the solution lies, at least as far as Less is concerned. */
.lft-side-panel,
.rt-side-panel {
    left: 0;
    margin-left: 0;
    .span4();
}

.ctr-panel {
    span12();
}

私はもう試した

1. C div に値 0のtopand属性を指定し、left
2. クラスfloat: leftのメディアクエリで指定するrt-side-pnl

...しかし、次のようなレイアウトが残ります。

*---*-----*
| A |     |
*---|  B  |
    |     |
*---*-----*
| C |
*---*

質問: A と C を上下に並べ、B を横に並べた 2 列のレイアウトを実現するには何が欠けていますか? 解決策が目の前にあるような気がしますが、それが見えていません。可能であれば、マークアップの構造を保持する必要があります。少し順序を変更する必要がある場合は、それも機能します。