Three column small layout bootstrap - css

Question

<form class="container">
<div class="row">
<div class="col-md-1">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-3">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-1">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
I have been trying to arrange these three items in a row like this in image, but i am not sure what class to apply and also in smaller devices i need to disable the column completely.

Answer 1

<!-- HTML --->
<div class="module-wrap">
<form class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-3">
<label for="vol" class="control-label">Analysis Volume</label>
</div>
<div class="col-md-6">
<div id="volume">
<div class="control">
<span class="knob"></span>
</div>
</div>
</div>
<div class="col-md-3">
<label for="username" class="control-label vol-box">50% usage</label>
</div>
</div>
</form>
</div>
/** CSS **/
.module-wrap {
width: 200px;
margin: 0 auto;
}
I added the class "hidden-xs" to the row, this will hide the div and everything in it on small devices. Also the columns must add up to a total of twelve.
You will need to wrap everything in a div to limit the total width.
I hope this solves your problem.