Bootstrap search box and button aligned to right of header text (not in nav bar)
<p>I'm using Bootstrap 3.3.7 and am having difficulty getting the search box and button to drop underneath the heading text when viewed on small screen. </p>

<p>I'd like to get it to stack as follows:</p>

<p>Large screen (as it is currently):</p>

<pre><code>[Title] [search input] [submit button]
</code></pre>

<p>Smaller screen:</p>

<pre><code>[Title]
[search input] [submit button]
</code></pre>

<p>Small screen:</p>

<pre><code>[Title]
[search input]
[submit button]
</code></pre>

<p>Any help much appreciated. I've been at this for ages and my CSS skills are too lacking for me to make any decent headway. Thanks.</p>

<p>Large screen:</p>

<p><a href="https://i.stack.imgur.com/vC8gG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vC8gG.png" alt="enter image description here"></a></p>

<p>Smaller screen (button gets cut off):</p>

<p><a href="https://i.stack.imgur.com/2OGzx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2OGzx.png" alt="enter image description here"></a></p>

<p>Small screen:</p>

<p><a href="https://i.stack.imgur.com/JxdFn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JxdFn.png" alt="enter image description here"></a></p>

<p>Here's my code:</p>

<pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
     &lt;div class="container"&gt;
         &lt;!-- all the navigation stuff --&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;!-- main content --&gt;
&lt;div class="container" role="main"&gt;

    &lt;div class="page-header"&gt;

        &lt;form action="" method="GET" class="form-inline pull-right"&gt;

            &lt;div class="form-group form-group-lg has-feedback"&gt;

                &lt;label class="sr-only" for="search"&gt;Search&lt;/label&gt;
                &lt;input type="text" class="form-control" name="q" id="search" placeholder="Search"&gt;

                &lt;span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"&gt;&lt;/span&gt;

            &lt;/div&gt;

            &lt;button type="submit" class="btn btn-lg btn-success"&gt;
            &lt;span class="glyphicons glyphicons-search" aria-hidden="true"&gt;&lt;/span&gt;Search
            &lt;/button&gt;

        &lt;/form&gt;

        &lt;h2&gt;Quite Long Header Text&lt;/h2&gt;

    &lt;/div&gt;

&lt;!--rest of page content --&gt;

&lt;/div&gt;
</code></pre>

<h1>update</h1>

<p>Thank you @ Robert C. This is how things look with your suggestion:</p>

<p><a href="https://i.stack.imgur.com/dcOof.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dcOof.png" alt="enter image description here"></a></p>

<p>and</p>

<p><a href="https://i.stack.imgur.com/9QWpd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9QWpd.png" alt="enter image description here"></a></p>

<p>and</p>

<p><a href="https://i.stack.imgur.com/86TVw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/86TVw.png" alt="enter image description here"></a></p>

<p>The button has reduced in size which is great, but the input field now spans the entire width. I think it would all work just fine if the small button and input field were in the same row. This would mean that even on small devices I'd only need two stacks.</p>

<p>Could you suggest how I might go about reducing the size of the input box so that it will allow the button to stick to its left side on the same 'row'?</p>

<p>Thanks a lot</p>