Bootstrap：响应侧栏拉

Question

我已经尝试了很长一段时间，但我无法弄明白。我有一个3-6-3网格，我想以一种响应的方式改变为两个col网格，如4-8，两侧或仅在一侧。

实施例

数字是默认12网格系统中的bootstrap 3.0网格跨度

在大屏幕上看起来是什么：

3：侧边栏左侧

6：内容

3：侧边栏右侧

----------------------------------------------------
|   Sidebar-Left  |  Content      |  Sidebar-right |
----------------------------------------------------

在较小的屏幕上应该是什么样子：

4：侧边栏左侧

8：内容

4：侧边栏右侧

---------------------------------------------------
|  Sidebar-Left   |                               |
|------------------             Content
|  Sidebar-right  |                               |
---------------------------------------------------

现在的样子： http://www.bootply.com/127177

无论如何这是可能的。我认为侧边栏应该以一种反应的方式以某种方式移动到一个新的行......

这里的任何帮助都很棒。

Answer 1

您可以通过在内容div上设置float：right属性，并使用媒体查询将其重置为较大的屏幕尺寸来实现此目的。这是一个fiddle。

html

  <div class ='container'>
        <div class ='row'>
            <div class ='col-md-3 col-xs-4'></div>
            <div class = 'col-md-6 col-xs-8 floater'></div>
            <div class ='col-md-3 col-xs-4'></div>
      </div>
  </div>

css

.floater {
  float: right;
  }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) { 
  .floater {
      float: left;
 }