另一个响应网格的单元格内的JQuery Mobile响应网格

Question

我尝试在第一个块的第一个块中有第二个响应式ui网格，但是我无法得到这样的东西。 这将表现为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/

理念应该是：在较大的屏幕尺寸下，两个表格元素位于同一条线上，而较小的尺寸，它们位于彼此之下。

更新

请让我更好地用图片解释这个问题以外的想法。

这将是更大屏幕尺寸的嵌套布局，例如平板电脑，风景：

这将是平板电脑中的嵌套布局，肖像：

这将是非常小的屏幕尺寸的嵌套布局，就像在手机中一样：

也许还有另一种方法可以在没有ui-grid的情况下实现类似的东西，或者有人可以提供帮助？感谢所有提前。