Bootstrap-inline-Formular-Steuerelemente alle wrap in der gleichen Zeit wie Ihre container immer schmaler. Wie bringe ich Sie zum wickeln individuell?

Habe ich fummelte mit CSS (vor allem display und line-height) zu zwingen ihn in die Unterwerfung, aber ich Frage mich ist so etwas schon gebaut, der in den Rahmen?

Hier ist ein Beispiel:
http://jsfiddle.net/marvhen/MeB6g/19/

<p>WITH BOOTSTRAP: The 3 text boxes in this form are inline when there
                   is enough space. When the container gets smaller they 
                   all stack and line up vertically but they all do this 
                   at the same time.</p>
<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="a">Email address</label>
                <input type="text" class="form-control" id="a" placeholder="a" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="b">Password</label>
                <input type="text" class="form-control" id="b" placeholder="b" />
            </div>
            <div class="form-group">
                <label class="sr-only" for="c">Password</label>
                <input type="text" class="form-control" id="c" placeholder="c" />
            </div>
        </form>
    </div>
</div>
<hr />
<p>WITHOUT BOOTSRAP: The 3 text boxes in this form are also inline when 
                     there is enough space. As the browser gets smaller 
                     however, they begin to wrap around one at a time until 
                     all 3 are lined up vertically.</p>
<div>
    <form>
        <div style="display:inline;">
            <input type="text" id="d" />
        </div>
        <div style="display:inline;">
            <input type="text" id="e" />
        </div>
        <div style="display:inline;">
            <input type="text" id="f" />
        </div>
    </form>
</div>