title: How to hide a div in Menu Collapse
body: <p>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. </p>
  
  <p>Currently, it shows both. Should I be using @media queries for this or is there any better method to hide the hide-mobile div?</p>
  
  <pre><code>    &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
              &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" ng-init="navCollapsed = false" ng-click="navbarCollapsed = !navbarCollapsed"&gt;
                              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div class="hide-mobile"&gt;
                          &lt;a class="navbar-brand" href="#"&gt;
                              Web-LOGO
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="Show-mobile"&gt;
                          &lt;a class="navbar-brand" href="#"&gt;
                              Mobile-LOGO
                          &lt;/a&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse" collapse="navbarCollapsed"&gt;
                      Awesome Mobile Links
              &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>