调整大小时更改跨度位置：Twitter Bootstrap答案

【问题标题】：Change span position when resized : Twitter Bootstrap调整大小时更改跨度位置：Twitter Bootstrap
【发布时间】：2013-04-24 21:56:46
【问题描述】：

在 Twitter Bootstrap 中，我连续使用 span5 和 span7。当我将浏览器调整为移动布局时，span5 保持在顶部，而 span7 低于 span5。我希望 span7 保持在顶部，而 span5 位于其下方。

我该怎么做？

提前致谢

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

为了实现这样的目标，您需要稍微操作一下 DOM 结构。如果可能的话，我首先建议尝试“破解”页面结构。我的意思是；是否可以将span7 首先放入DOM，然后将span7 向右浮动，span5 向左浮动？这将允许您在任何屏幕尺寸下以正确的顺序显示它们，并且您可以使用媒体查询以所需尺寸修复浮动。

否则，这听起来像是 jQuery 的工作。 jQuery 将允许您动态操作 DOM 元素，您可以轻松编写一个脚本，在特定窗口宽度下调整两个元素的 DOM 位置。

【讨论】：

【解决方案2】：

将它们在 DOM 树中的顺序颠倒过来：

&ltdiv class="span7">

... 然后为 span5 和 span7 设置 float: right。您可以为此使用特定的 CSS 类名称。

这样，在较大的显示器上，span5 位于左侧，span7 位于右侧，在移动设备上 span7 位于上方，span5 位于下方。