Bootstrap 3 - Responsive Visibilities for multiple sizes - css

Question

I have an app that uses Bootstrap 3. In that app, I have a toolbar. I only want that toolbar to appear on "md" and "lg" screens. On "xs" and "sm" sized screens, I want a drop-down menu to appear in its place. My question is, how do I do that? Currently, I have the following code, which is available in this Bootply.
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right hidden-xs">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown hidden-lg">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>
</div>
</div>
My problem is, in Bootstrap 3, the responsive utilities do not seem to let define multiple breakpoints for visibility. Is there a way for me to say something like, "if my screen size is "md" or less, show the menu. Otherwise, use the toolbar?" If so, how?
Thanks!

Answer 1

you can look it up here
http://getbootstrap.com/css/#responsive-utilities-classes
So on the toolbar you should have
<div class="btn-toolbar pull-right hidden-xs hidden-sm">
and on the dropdown
<div class="dropdown hidden-md hidden-lg">

Answer 2

Try use this code:
<div class="container">
<div class="row">
<div class="col-xs-9">
<ul class="list-inline">
<li><i class="fa fa-user"></i></li>
<li><strong>Joe Smith</strong></li>
</ul>
</div>
<div class="col-xs-3">
<div class="btn-toolbar pull-right visible-md visible-lg">
<div class="btn-group">
<button class="btn"><i class="fa fa-save"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="dropdown visible-xs visible-sm">
<i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li>
<li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li>
</ul>
</div>
</div>