angularjs - メニュー折りたたみでdivを非表示にする方法

Question

Bootstrap Angular UI で折りたたみメニューが機能するようになりました。ただし、「hide-mobile」クラスの div を非表示にして、代わりに「show-mobile」クラスをモバイル ビューに表示する方法がわかりませんでした。

現在、両方を表示しています。これには @media クエリを使用する必要がありますか、それとも hide-mobile div を非表示にするためのより良い方法はありますか?

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle" ng-init="navCollapsed = false" ng-click="navbarCollapsed = !navbarCollapsed">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                    </button>
                    <div class="hide-mobile">
                        <a class="navbar-brand" href="#">
                            Web-LOGO
                        </a>
                    </div>
                    <div class="Show-mobile">
                        <a class="navbar-brand" href="#">
                            Mobile-LOGO
                        </a>
                    </div>
            </div>

            <div class="collapse navbar-collapse" collapse="navbarCollapsed">
                    Awesome Mobile Links
            </div>
    </nav>

Answer 1

の代わりhide-mobileにshow-mobile_hidden-xsvisible-xs