jquery-mobile - 別のレスポンシブ グリッドのセル内の JQuery Mobile レスポンシブ グリッド

Question

最初の ui-grid のブロック内に 2 つ目のレスポンシブ ui-grid を配置しようとしましたが、このようなものを動作させることができません。これは、25% 25% 50% の柔軟なレスポンシブ レイアウトのように動作します。

ここに私が意味することの短いサンプルがあります:

<fieldset class="ui-grid-a ui-responsive">
    <div class="ui-block-a">
        <fieldset class="ui-grid-a ui-responsive">
            <div class="ui-grid-solo">
                <div class="ui-block-a">
                </div>
            </div>
            <div class="ui-block-a">
            </div>
            <div class="ui-block-b">
            </div>
        </fieldset>
    </div>
    <div class="ui-block-b">
        <img src="images/jquery-logo.png" width="100%" />   
    </div>
</fieldset>

ここに私が今得たもののサンプルがあります: http://jsfiddle.net/j5zbB/

画面サイズが大きい場合は 2 つのフォーム要素が同じ行に配置され、サイズが小さい場合は互いの下に配置されます。

アップデート

この質問を超えたアイデアを写真でよりよく説明させてください。

これは、タブレットのような大きな画面サイズでのネストされたレイアウトで、横向きになります。

これは、タブレットの縦長のネストされたレイアウトになります。

これは、電話のように非常に小さな画面サイズでネストされたレイアウトになります。

たぶん、UIグリッドなしでそのようなことを達成する別の方法があるか、誰かが助けることができますか? 事前にすべてに感謝します。