Html 如何将导航条放置在屏幕右侧，然后使用引导将导航条放置在顶部？

我在屏幕左侧放置了一些内容，在右侧放置了一个导航栏

这是代码（简化）：

但是当我缩小屏幕时，我的

navbar

会显示在屏幕底部的内容下方

[THE CONTENT]
[THE NAVBAR]

我想要的是，当我缩小屏幕（

col sm

和

col xs

）时，在屏幕顶部（内容上方）分配导航栏，而不是在底部。像这样：

[THE NAVBAR]
[THE CONTENT]

可能吗？我怎样才能做到呢

p.S:根据我尝试过的

Igor Ivancha

答案：

<div class="col-sm-9 col-sm-push-3">
   //Here some content
</div>
<div class="col-sm-3 col-sm-pull-9">
   //Here the navbar
</div>

//这里有一些内容
//这里是导航栏

但它也不起作用

---

提前谢谢

如果需要更改网格列的顺序，引导程序有

-pull-*

和

-push-*

类：

<div class = "col-md-3 col-md-push-9">
  //Here navbar
</div>

<div class = "col-md-9 col-md-pull-3">
  //Here some content
</div>

//这里是导航栏
//这里有一些内容

---

将ID添加到导航栏和内容前的列中

    <div class="col-md-9" id="theContent">
    ...
    <div class="col-lg-2 col-md-3" id="theNavbar">
    ...

...
...

然后添加一些jQuery来移动它们：

 if ($(window).width() <= 997) {
    $('#theNavbar').insertBefore($('#theContent'));
  }

  if ($(window).width() > 997) {
    $('#theNavbar').insertAfter($('#theContent'));
  }

if（$（窗口）.width（）997）{
$（'theNavbar'）。在（$（'theContent'））之后插入；
}

---

编辑：更新了jsfiddle，Igor基本上拥有它，但是改变了div和“push/pull”类的顺序

//这里是导航栏
//这里有一些内容

---

但在这两种情况下，您都提供了导航栏，导航栏位于内容的左侧，当您将导航栏变小时，导航栏将位于底部。你的行为和我一样。我需要导航栏位于右侧，在较小的屏幕上位于顶部。但在大屏幕上导航栏不位于右侧。在JSFIDLE中，将输出框加宽并再次点击Run，它可以工作，但必须大于997px。同样，不是完美的，但可以加载。检查我的更新，现在就可以了。只需将ID移到导航栏前面的div列，即可获得正确的Igor答案。还有一点代表性；）

    <div class="col-md-9" id="theContent">
    ...
    <div class="col-lg-2 col-md-3" id="theNavbar">
    ...

 if ($(window).width() <= 997) {
    $('#theNavbar').insertBefore($('#theContent'));
  }

  if ($(window).width() > 997) {
    $('#theNavbar').insertAfter($('#theContent'));
  }

<div class = "col-md-3 col-md-push-9">
  //Here navbar
</div>

<div class = "col-md-9 col-md-pull-3">
  //Here some content
</div>