Twitter Bootstrap crashes only on mobile devices

Question

I have a menu with a title (which will be a trigger for the menu).
I want the menu to crash only on mobile resolution.
On the big screen, I want this menu to be fully displayed. I added hidden-xs to this menu, but that will not work.

 <span class='footer_list' data-toggle="collapse" data-parent="#accordion" href="#resources"> Resources </span> <ul class="list-unstyled hidden-xs footer-nav" id="resources"> <li><a class="footer_link" href='#'>Link 1</a></li> <li><a class="footer_link" href='#'>Link 2</a></li> <li><a class="footer_link" href='#'>Link 3</a></li> <li><a class="footer_link" href='#'>Link 4</a></li> </ul> 

hidden-xs disable the switch so that I cannot see this menu even when I click on the title.

Answer 1

 @media (min-width: 768px) { .footer-nav{ display: block !important; padding-bottom: 0px; overflow: visible !important; } }