How to hide a div in Menu Collapse

I finally got the collapse menu working for the Bootstrap Angular UI. However I still couldn't figure out how to hide the div for the "hide-mobile" class and show the "show-mobile" class in the mobile view instead.

Currently, it shows both. Should I be using @media queries for this or is there any better method to hide the 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>

instead of hide-mobile and show-mobile try hidden-xs and visible-xs