如何在较小的浏览器窗口上将span9转换为span12？

Question

我的布局如下：

<div class="container">
<div class="span9" ></div> <div class="span3" ></div>
</div>

当用户在平板电脑或移动设备上查看页面时，我希望span9 div和span3 div都成为span12 div，我希望它们在另一个上方垂直堆叠。

这可以完成吗？如果可以的话怎么办？我当前的解决方案依赖于我在小浏览器窗口上显示的第二组div，我隐藏了上面的div。

Answer 1

使用Bootstrap 3，这非常简单：

<div class="col-md-9">...</div>
<div class="col-md-3">...</div>

在典型的桌面分辨率（＆gt; 992px）下，div将是9/12列＆amp; 3/12列。在任何小的，它们将是12/12。

Twitter Bootstrap 3 grids

---

使用Bootstrap 2.3.2，您可以添加媒体查询：

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  .span9, .span3 {
    display: block;
    float: none;
    width: 100%;
  }
}