根据屏幕尺寸放置差异

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>

如果不必创建两次布局并根据媒体查询隐藏/显示正确的布局，最好的方法是什么？

提前致谢， 克里斯