title: Bootstrap Styling issue when browser re sized below 767 pixels
body: <p>I have this bit of bootstrap code below:</p>
  
  <pre><code>&lt;form class="navbar-form "&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" class="form-control"  placeholder="Search" name="query" ng-model="query"&gt;
                      &lt;/div&gt;
                      &lt;button type="button" class="btn btn-default" ng-click="queryresult()"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>But my problem is when I resize my browser below 767 pixels wide the nice pretty search bar looks like so:</p>
  
  <p><img src="https://i.stack.imgur.com/3CbOn.png" alt="enter image description here"></p>
  
  <p>I want the search icon to the right of the search field how do I do that?</p>