I wish to hide an input-group-btn when viewed on extra-small devices. What is the appropriate way to achieve this?

I've tried the following:

```
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn hidden-xs">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div><!-- /btn-group --> 
    </div><!-- /input-group --> 

```

But it messes up the rendering of the input-group <http://bootply.com/81206>

Without 'hidden-xs':

![enter image description here](https://i.stack.imgur.com/wfM2R.jpg)

With 'hidden-xs':

![enter image description here](https://i.stack.imgur.com/BLZET.jpg)