**How do I show link text beside a link's icon/badge *only* when a `navbar` is collapsed?**

Right now my `bootstrap3` driven `navbar` uses only icons, when it is uncollapsed:

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

This is problematic when the `navbar` is collapsed:

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

... there is no descriptive text beside the links, but there is clearly room for it. The removal of text descriptions is for saving space, but once collapsed there is ample space... and it seems to be defective without descriptions, since so much real-estate is taken up.

I've looked through helper classes, and `collapse` functionality in the documentation, and tried to put `<span class='collapse in'>` tags in containing text, after the `badge` or `glyphicon` tags.

When I do that, the text is always visible, not only when the `navbar` is collapsed. I would prefer not to use `class='visible-xs'` or another class like it, based on actual browser width.

What is the correct way to detect an element is in a collapsed `navbar` and only show text in that case?

**Here's a gist:** <https://gist.github.com/digitalextremist/6e70807a8b0e3c3da993>

And bootply: <http://www.bootply.com/105538>