Responsive search form in Bootstrap

I am trying to build a simple horizontal search & filtering form using Twitter Bootstrap as can be seen in the image attached. I am trying to build it so it adapts to different screen sizes as shown in the image. The results that I receive from my code aren't according my expectations. ``` <div id="search_block" class="panel-body"> <form role="form" class="form-horizontal" method="post" action=""> <div class="form-group"> <label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label> <div class="col-xs-8 col-sm-8 col-md-4"> <input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control"> </div> <div class="button-group col-xs-8 col-sm-8 col-md-2"> <button class="btn btn-primary" value="search" name="search" type="submit">Search</button> <button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button> </div> </div> <div class="form-group"> <label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label> <div class="col-xs-8 col-sm-8 col-md-2" id="filters"> <select class="form-control" name="section_id"> <option value="all">All Sections</option> <option value="all">Test</option> </select> </div> <div class="col-xs-8 col-sm-8 col-md-2"> <select class="form-control" name="category_id"> <option value="all">All Categories</option> <option value="71">Test</option> </select> </div> </div> </form> ``` My code can be found at: http://jsfiddle.net/NB89d/