Css 为移动设备自定义纵向引导列

任务：尝试制作移动网页：（还包括jQuery和引导文件，以便正常运行）

问题：页面应根据方向更改布局-在横向模式下

<div id="videoThumbs">...</div>

。。。

将在下方显示2个缩略图和快照

<div id="billboard">...</div>

。。。

在纵向模式下，后者位于屏幕左侧，前者现在只显示一个缩略图，看起来像侧边栏

---

仅使用MediaQuery和引导很难做到这一点。我无法找到通过JavaScript应用的正确逻辑。请提供帮助。

您可以尝试使用默认的引导响应实用程序类

请查看文档：

小型和超小型设备类可用于纵向平板电脑视图，小型和中型设备类可用于横向模式，您需要尝试各种组合

---

显然，这取决于平板电脑的屏幕大小，但在7英寸和9英寸的平板电脑上效果非常好。

Bootstrap的响应网格根据设备的分辨率工作。我想做的是根据设备的方向改变移动设备的布局。无论设备的分辨率是什么，当从横向翻转到纵向时，它都应该改变，反之亦然。到目前为止，我已经发现这超出了引导的范围。mediaquery更容易实现，但合并由引导生成的缩略图视图需要更长的时间。我选择各种组合，为此我可能需要JavaScript编码方面的帮助。JavaScript中检测设备方向的唯一方法是屏幕分辨率。只有在apachecordova这样的框架中，相对于设备硬件，您才能使用JS访问更多的方法。