Bootstrap apply nav-stacked if small screen - html

Question

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">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</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.

Answer 1

Found the solution. There is a class called "nav-justified". It simply stacks the navigation pills as soon as they don't fit into a single row anymore.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>

Answer 2

Try to add this CSS to your solution. Please check the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.nav-justified > li {
display: inline-block;
width: auto;
}
}
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>