I have a multi-step form hooked up with angular ui router, with a little bootstrap nav on top:

```
<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount">Step <span class="badge">1</span> Amount</a></li>
  <li ui-sref-active="active"><a ui-sref=".card">Step <span class="badge">2</span> Payment</a></li>
  <li ui-sref-active="active"><a ui-sref=".contact">Step <span class="badge">3</span> Contact</a></li>
  <li ui-sref-active="active"><a ui-sref=".confirm">Step <span class="badge">4</span> Confirm</a></li>
</ul>

```

Looks slick on larger screens, but the amount of text in each pill causes them to occupy their own line on mobile-sized screens. I'd like instead for the non-badge content of each pill to disappear on small-sized screens, as per the screenie below.

I could do this quickly with extra span tags, but I'd like to know if there's a CSS-only solution that I could apply instead.

Current Behavior:
=================

[![Current Behavior - pills take up their own line](https://i.stack.imgur.com/8wKtw.png)](https://i.stack.imgur.com/8wKtw.png)

Desired Behavior:
=================

[![Desired behavior: extraneous text is hidden on mobile](https://i.stack.imgur.com/outF4.png)](https://i.stack.imgur.com/outF4.png)

Thank you for your time.