Bootstrap 3 column sensible stacking plus floated right element - html

Question

I'm attempting to use Bootstrap 3's col layout in order to have 3 columns of drop-downs that stack sensibly on small screens. However, I'm getting odd results when I attempt this.
What I need to have happen is for all 3 dropdowns (and their labels) to stack under one another in a sensible fashion when the viewport is narrowed.
Here's how I want it to look:
However, as you can see from this fiddle, it doesn't work that way at all:
Either they overlap due to the float:left, or the dropdown and the label break up and wind up on seperate lines.
http://jsfiddle.net/g8u45rmz/1/
The code is very straight-forward:
<div class="col-xs-4">
<span class='select-subfolder-label'>Subfolder:</span>
<select id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
In addition, I need the glyph icon on the right side to always be floated right, even when the columns are stacked the way I want.
How can I achieve these two objectives? Help is appreciated.

Answer 1

The 'col-xs-4' class basically says, 'even on extra small screens, this takes up 4 of the 12 columns.
Try using col-md-4 or col-sm-4, when the screen enters xs range, it'll switch to full width and stack as expected.

Answer 2

simply adding a form-control class on select will get the desired result.
For stacked select menu on smaller window, adding class col-xs-12 to parent div will work. This will make the div use up all the width available to it on small devices. Also for small and medium sized window I have used col-sm-4 and col-md-4, this will change it so that all divs appear inline.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class='row subnav'>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-folder-label'>Folder:</span>
<select class="form-control" id='test1' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-subfolder-label'>Subfolder:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div class="col-xs-12 col-sm-4 col-md-4"> <span class='select-other-label'>Other:</span>
<select class="form-control" id='test2' class='folder-sel'>
<option>All</option>
</select>
</div>
<div id="subnav_gear" class='dropdown nav navbar navbar-nav navbar-right'> <span class='glyphicon glyphicon-cog'></span>
</div>
</div>