css - 小さな画面でサイドバーに変わる Bootstrap 3 topnav?

Question

私は比較的 Bootstrap 2 の経験があり、通常は自分のやりたいことを実行できますが、Bootstrap 3 で問題が発生しています。

ページ全体にトップ ナビゲーションを配置し、その下にセカンダリ トップ ナビゲーションを配置しようとしています。画面が十分に大きい場合、2 番目のトップ ナビゲーションはポップアップしてサイドバーにする必要があります。

私はかなり行き詰まっており、http://getbootstrap.com/examples/offcanvas/からどこに行くべきかわかりません。

ありがとう！

編集：これは私が持っているものです。それはアイデアを示していますが、nav は 2 回定義されています。見てください、あなたは私が何を意味するかを見るでしょう。 http://jsfiddle.net/xwp7S/2/

次のように定義されたサイドバーがあります。

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="well sidebar-nav">
                <ul class="nav">
                    <li>Sidebar</li>
                    <li class="active"><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                    <li><a href="#">Link 6</a></li>
                    <li><a href="#">Link 7</a></li>
                </ul>
            </div>
            <!--/.well -->
        </div>

と定義された上部のナビゲーション

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".topnav-collapse">
               <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse topnav-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>

および追加のcss

 @media screen and (max-width: 768px) {
    #sidebar {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    #topsidebar {
        display: none;
    }
}

nav を 2 回定義しないという問題にどのように対処すればよいですか?