Customizing input fields in bootstrap - html

Question

How do I place the two input fields close to each other when they have shorter widths on larger screen. The problem is that I want the input fields to be in one line with shorter widths. I eventually achieve that but then on shorter screens it stacks up even though it has enough space to be in one line. Here is the demo.
What I would like to have: Keep the input fields in one line as long as there widths fit in the viewport or else, stack them up with full width.
NOTE: I have just started learning bootstrap and not well versed with all the classes.
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="input-group-lg">
<input id="user" class="form-control form-inline" placeholder="Your name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-group-lg">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #fff;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
margin: 0;
}
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.jumbotron h1 {
font-family: chalkitup, "sans-serif";
color: #69350F !important;
}
#user, #boardSize {
max-width: 280px;
}

Answer 1

To prevent stacking you should use col-xs-*.
If you combine with pull-right and pull-left then you can choose where you want to place your input in the grid. Notice the use of form-inline class
<form class="form-inline">
<div class="col-xs-6">
<div class="form-group pull-right">
<div class="input-group-lg ">
<input id="user" type="text" class="form-control form-inline" placeholder="Your name">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group pull-left">
<div class="input-group-lg ">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</form>
DEMO