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

Question

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

我怎么做？

提前致谢

Answer 1

颠倒它们在 DOM 树中的顺序以获得：

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

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

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

Answer 2

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

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