title: Display icons inline with navigation
body: <p><a href="https://i.stack.imgur.com/4R6A6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4R6A6.png" alt="enter image description here"></a></p>
  
  <p>My html markup is:</p>
  
  <p>
              </p>
  
  <pre><code>            &lt;div class="row"&gt;
                  &lt;div class="col-sm-8"&gt;
  
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"&gt;
                              &lt;span class="sr-only"&gt;Toggle  navigation&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;!-- navbar-header --&gt;
  
  
                      &lt;nav class="collapse navbar-collapse navigation" id="navbar-collapse"&gt;
  
                          &lt;ul class="nav navbar-nav menu"&gt;
                              &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="blog.html"&gt;Features&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="resources.html"&gt;Lifestyle&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="contact.html"&gt;Travel&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="contact.html"&gt;Music&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="contact.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="contact.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
                      &lt;/nav&gt;
  
                  &lt;/div&gt;
                  &lt;!-- navbar-collapse --&gt;
  
                  &lt;div class="col-sm-4 navigation" id="social-icons"&gt;
  
                      &lt;ul class="menu"&gt;
  
                          &lt;a href=""&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-heart"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a href=""&gt;&lt;i class="fa fa-tumblr"&gt;&lt;/i&gt;&lt;/a&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!-- social-icons --&gt;
              &lt;/div&gt;&lt;!-- row --&gt;
          &lt;/div&gt;
          &lt;!-- container --&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>While resizing window, the lists stack probably because i have used the grid system.</p>
  
  <p><a href="https://i.stack.imgur.com/jDyhY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jDyhY.png" alt="enter image description here"></a></p>
  
  <p>But what I want to achieve is that the responsive menu(the three lines) be pulled to the left and the icons remain at their place.</p>
  
  <p>I am trying to learn web development on my own. Any help/suggestion would be appreciated.</p>
  
  <p><strong>Edit 1:</strong>
  After using media query to set the position of the icons to relative, i have achieved this.</p>
  
  <p><a href="https://i.stack.imgur.com/3m3zG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3m3zG.png" alt="enter image description here"></a></p>
  
  <p>I want the icons to be on the right side and the menu to be on the left side.</p>