引导:响应侧栏拉出

Question

我已经努力了很长一段时间了，但我就是想不出来。我有一个3-6-3的栅格，我想以一种响应的方式改变为一个像4-8这样的二次网格，其中双方或只在一侧。

示例

在默认的12网格系统中，这些数字是引导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

可以通过在content上设置float : right属性，并使用媒体查询以较大屏幕大小将其重置为左侧来实现这一点。这是一个小提琴。

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;
 }