Hiding button on desktop browser and showing only on mobile devices - css

Question

I have bootstrap header nav bar with buttons. What I trying to do is to add button which is visible only on mobile devices and small screens - phones/tablets.
This is structure of the header
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>BUTTON 4</li>
</ul>
</div>
</nav>
</header>
I want to make BUTTON 4 visible only on small screens.
So I make the button like this:
<li class="not_visible">BUTTON 4</li>
Then in css I add
.not_visible {
display: none;
}
#media (max-width: 767px) {
.header{
text-align : center;
}
.not_visible {
display: inline;
}
.nav{
margin-top : 30px;
}
}
But is visible on every screen resolution. Seems like display: none; isn't working.

Answer 1

Since you're using bootstrap, you can use visible-xs class on them:
<li class="visible-xs">BUTTON 4</li>
Now, it will be visible in xs-devices and hidden in other devices.

Answer 2

BUTTON 4
is best approach however if you do not follow bootstrap then simply you can use display:inline !important;
As the css which is lower on page has more priority and in your case I think there is some hierarchy problem.
Try this deisplay:inline !important;

Answer 3

It is probably late but since I noticed you are using bootstrap you can use .d-block .d-sm-none as your class to make it only visible on xs- small devices.
Use this as a guide.