Display icons inline with navigation - html

Question

My html markup is:
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div><!-- row -->
</div>
<!-- container -->
</nav>
While resizing window, the lists stack probably because i have used the grid system.
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.
I am trying to learn web development on my own. Any help/suggestion would be appreciated.
Edit 1:
After using media query to set the position of the icons to relative, i have achieved this.
I want the icons to be on the right side and the menu to be on the left side.

Answer 1

set position:relative to the parent div then Try with this
#media (max-width:767px){
#social-icons {
position:absolute;
top:15px; /*or whatever you need*/
}
}
Try with the code snippet
.navbar-toggle {
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
background: #000;
float:left;
}
#social-icons {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-heart"></i> <i class="fa fa-google-plus"></i> <i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- container -->
</nav>
<!--/.nav-collapse -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>