Javascript 根据屏幕大小放置差异

我有一个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>

如果不需要创建两次版面并根据媒体查询隐藏/显示正确的版面，那么实现这一点的最佳方法是什么

提前感谢,，

---

Chris

如果$（window）.width（）>480{add table}或者{add collapsable}我会根据屏幕大小填充整个内容，这与你的建议类似。。。谢谢；）