为移动设备纵向定制自举列

Question

任务：尝试制作移动网页：http://jsfiddle.net/anujbhai/hgaH7/3/（还包括jQuery和Bootstrap文件以便正常运行）。

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

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

将在

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

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

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

仅使用mediaqueries和Bootstrap很难做到这一点。我无法弄清楚通过JavaScript应用的正确逻辑。请帮忙。

Answer 1

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

看一下文档：

• http://getbootstrap.com/css/#responsive-utilities-classes
• http://getbootstrap.com/css/#grid-options

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

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