Bootstrap column gets displaced into new row - html

Question

I am using Bootstrap3 and using a collapsible element to in my design.
I am using 12 column inside the row as follows
<!-- Search Filter -->
<div id="search-filter">
<div class="container">
<div class="row">
<div class="col-md-5 col-xs-12">
<!-- Collapse Search -->
<button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
<!-- /Collapse Search -->
<h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="searchbar-collapse-set">
<div class="col-md-4 col-xs-12">
<div class="distance">
<h5>distance:</h5>
<div id="distance-slider"></div>
<span class="distance-value">250 kms</span>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="sort">
<h5>sort:</h5>
<ul class="nav nav-pills">
<li class="active">popular</li>
<li>name</li>
<li>distance</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- /Search Filter -->
Due to the Collapsible element i the third column is shifting to the next row.
I removed the NavCollapse padding to 0 and the content disappears from the drop down as bellow.
By Adding the following code it gets back into place as bellow.
But it Disrupts the full screen view as bellow.
Nomad Link

Answer 1

My suggestion is to use a media query such as
#media (min-width: 1200px) { ... }
so that you can add the padding on a desktop display without effecting the display on smaller devices.