javascript - 根据屏幕大小放置差异

Question

我有一个带有 jquerymobile 的网站，目前针对移动设备进行了优化。内容方面，我特别使用可折叠的，并通过 javascript 动态填充内容。

现在我想创建一个响应式设计，将一些 div 从它们的“可折叠集合”中取出，并针对更大的屏幕尺寸以不同的方式放置它们——例如：

移动视图：

<div data-role="collapsible-set">
    <div data-role="collapsible"><div id="content1"></div></div>
    <div data-role="collapsible"><div id="content2"></div></div>
</div>

桌面视图：

<table><tr><td>
    <div id="content1"></div></td><td>
    <div id="content2"></div></td></tr>
</table>

什么是最好的方法来实现这一点，而不必根据媒体查询创建两次布局并隐藏/显示正确的布局？

在此先感谢，克里斯