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

Question

在Twitter Bootstrap中，我连续使用了span5和span7。当我将浏览器重新调整为移动布局时，span5保持在顶部，span7低于span5。我希望span7保持在最顶层，而span5则低于它。

我该怎么做？

提前致谢

Answer 1

为了实现这样的目的，你需要稍微操纵你的DOM结构。我会首先建议尝试“破解”页面结构，如果可能的话。我的意思是这个;是否可以将span7置于DOM中，然后将span7向右浮动，span5向左浮动？这将允许您以任何屏幕大小以正确的顺序显示它们，并且您可以使用所需大小的媒体查询来修复浮动。

否则，这听起来像是jQuery的工作。 jQuery允许你动态操作DOM元素，你可以轻松编写一个脚本，在某个窗口宽度处理两个元素的DOM位置。

Answer 2

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

<div class="span7"></div>
<div class="span5"></div>

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

这样，在较大的显示器上，您将拥有左侧的span5和右侧的span7，以及上方的span7和下方的span5。