Bootstrap 3 RC1：列排序

Question

我有两个主要的盒子：一个 8 列宽的盒子，里面有一堆面板，第二个 4 列（偏移量 1）作为侧边栏。

我想将侧边栏推到小屏幕上的侧边栏框的顶部。我尝试过应用col-12 col-push-12（面板框）和col-12 col-pull-12（侧边栏框），但没有任何运气。我还想确保侧边栏在被推到顶部时也在网格上“居中”（即好像它是 col-offset-4 col-4）。

我还在 GitHub 上的 Bootstrap 存储库中注意到一些关于这种行为的动态（未解决的问题），但我可能只是混淆了一些事情。

<div class="container content">
    <div class="row">
        <div class="col-lg-8 col-12">
            <div class="panel listing">
                ...
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-4 col-lg-3 col-lg-offset-1 col-12">
            <div class="sidebar">
                ...
            </div>
        </div>
   </div>
</div>

上面是现在的“原版”代码：我需要做什么才能在移动设备和平板电脑上获得上面的侧边栏？

更新：由于某些提交（鉴于“RC1”不是我所说的 RC！），似乎已接受的答案/实现不再有效：https://github.com/twbs/bootstrap/commits/3.0.0-wip

如果有人有更新的答案，我将不胜感激。

Answer 1

您不能像这样更改元素的顺序（Bootstrap 中没有 push-12 或 pull-12 类），因此您必须更改标记中的顺序并改为在大屏幕上使用列排序

<div class="container content">
    <div class="row">
        <div class="col-lg-3 col-lg-offset-1 col-lg-push-8 col-sm-4 col-sm-offset-4">
            <div class="sidebar">
                SIDEBAR
            </div>
        </div>
        <div class="col-lg-8 col-lg-pull-4 col-sm-12">
            <div class="panel listing">
                PANEL
            </div>
        </div>
   </div>
</div>

Demo fiddle

另外我刚刚发现 NetDNA 上托管的 Bootstrap 3 CSS 文件不是最新的，并且没有很好地实现 push/pull 类，所以我不得不下载官方文件并将 css 代码复制到小提琴