Bootstrap apply nav-stacked if small screen

Let's say we have a simple navigation bar like this:
http://getbootstrap.com/components/#nav-pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

How can I add the class "nav-stacked" to it when the window or parent element is smaller than say 940px. Or even better: as soon as the navigation bar can't fit all elements in the same line anymore.

This would be pretty straight forward in javascript, but I'd like to see a pure css/html solution, but without adding @media queries to the bootstrap source code.