jquery-mobile - 另一个响应式网格的单元格内的 JQuery Mobile 响应式网格

Question

我尝试在第一个块内有第二个响应式 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/

想法应该是：在较大的屏幕尺寸下，两个表单元素位于同一行，在较小的屏幕尺寸下，它们位于彼此下方。

更新

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

这将是更大屏幕尺寸的嵌套布局，例如在平板电脑中，横向：

这将是平板电脑中的嵌套布局，纵向：

这将是非常小的屏幕尺寸的嵌套布局，例如在手机中：

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