网格系统秩序的自举2

Question

我有引导2.

我想和一些文本的标题的Grid System问题，并在其右侧的图像。
因此，我做了一个row，并在其中放入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

您可以使用媒体查询和浮动功能。

应该看起来有点像这样：

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

现在，你应该使用一个媒体查询（如responsive.less文件中看到）切换的时候，屏幕尺寸跳到下方的特定标记。然后确保span4的浮标已被移除。您可能需要使用.row-fluid而不是通常的.row，并使用自己的填充使其看起来很棒。