Twitter Bootstrapのfluidレイアウトで右側にあるカラムを、横幅が狭いときに上側に表示したい

こんなHTMLがあるとして……

<div class="row-fluid">
  <div id="content" class="span8">めいんこんてんつ</div>
  <div id="sidebar" class="span4">サイドバー</div>
</div>

ブラウザ幅767px以下で表示すると、サイドバー要素がメインコンテンツの下に表示されてしまうわけだけど、これをメインコンテンツの上に表示するにはどうすればよいかということで。

まずはHTML要素の現れる順番をひっくり返しておきます。

<div class="row-fluid">
  <div id="sidebar" class="span4">サイドバー</div>
  <div id="content" class="span8">めいんこんてんつ</div>
</div>

このままだとサイドバーが左に表示されてしまうので、サイドバーを強引に右へ移動させます。

#sidebar {
  float: right;
}

しかし、もともと右側にあるはずだった#contentはmargin-leftをもっているので、左端に余計なスペースができてしまい、逆にコンテンツとサイドバーの間の隙間がなくなってしまう。そこでこう。

#content {
    margin-left: 0;
}

おわり。

ちなみにコンテンツとサイドバーの要素はIDセレクタでCSS定義しないとBootstrapのCSSに優先度負けてしまって!importantすることになってキモいので、ID設定だいじ！

ついでに、ブラウザ幅縮小時にサイドバーとコンテンツの間にマージンを入れたい場合は、こんなかんじ。

@media ( max-width : 767px) {
  #main {
    margin-top: 20px;
  }
  #sidebar {
    float: none;
  }
}