title: How can I put a navbar on the right side of the screen and after on the top with Bootstrap?
body: <p>I have put some content on the left of the screen and a navbar on the right side. </p>
  
  <p>This is the code (simplified):</p>
  
  <pre><code>&lt;div class="row" align="center"&gt;
              &lt;div class = "col-md-12"&gt;
                  &lt;div class = "container"&gt;
                      &lt;div class = "row"&gt;
                          &lt;div class = "col-md-9"&gt;
                              //Here some content
                          &lt;/div&gt;
                          &lt;div class = "col-lg-2 col-md-3"&gt;
                              &lt;nav class="navbar navbar-default navbar-collapse"&gt;
                                &lt;div class="container-fluid"&gt;
                                    &lt;ul class="nav navbar-nav"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;option1&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;option2&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="dropdown"&gt;
                                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;option3 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                                        &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;number1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;number2&lt;/a&gt;&lt;/li&gt;
                                        &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;option4&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
                              &lt;/nav&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and it is displayed like this on big and medium screens (<code>col-lg</code> and <code>col-md</code>):</p>
  
  <pre><code>[THE CONTENT][THE NAVBAR]
  </code></pre>
  
  <p>but when I make my screen smaller my <code>navbar</code> goes to the bottom of the screen, under the content.</p>
  
  <pre><code>[THE CONTENT]
  [THE NAVBAR]
  </code></pre>
  
  <p>What I want it is to allocate the navbar on the top of the screen (above the content) when I make my screen smaller (<code>col-sm</code> and <code>col-xs</code>) instead of the bottom side. Like this:</p>
  
  <pre><code>[THE NAVBAR]
  [THE CONTENT]
  </code></pre>
  
  <p>Is it possible? How can I achieve it?</p>
  
  <p><strong>P.S:</strong> According to <code>Igor Ivancha</code> answer I tried with:</p>
  
  <pre><code>&lt;div class="col-sm-9 col-sm-push-3"&gt;
     //Here some content
  &lt;/div&gt;
  &lt;div class="col-sm-3 col-sm-pull-9"&gt;
     //Here the navbar
  &lt;/div&gt;
  </code></pre>
  
  <p>but it also does not work.</p>
  
  <p>Thanks in advance!</p>