html - Bootstrap 2 中的网格系统顺序

Question

我对 Grid System 有疑问Bootstrap 2.

我想制作一个带有一些文本的页眉，并在其右侧制作一张图片。
因此我制作了一个行，并在里面放了一个span8和一个span4。

但是，当窗口太小而无法并排显示内容时，我希望 span4 div 位于 span8 div 之前。

<div class="hero-unit">
    <div class="container">
        <div class="row">
            <div class="span8">
                This is some text
            </div>
            <div class="span4">
                <img src="image.png" alt="" />
            </div>
        </div>
    </div>
</div>

---

我该怎么做？
所以换句话说，我怎样才能改变 div 的顺序。

如果我没有完全弄错的话，文档中没有描述此类内容。

Answer 1

您可以使用媒体查询和 float 来做到这一点。

应该看起来像这样:

<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>

现在您应该使用媒体查询(如 responsive.less 文件中所示)在屏幕尺寸跳到特定标记以下时进行切换。然后确保删除了 span4 的 float 。您可能需要使用 .row-fluid 而不是通常的 .row 并使用您自己的填充使其看起来很棒。