Can't format columns and content in Twitter Bootstrap - css

Question

I am having difficulty understanding the different column width attributes that are defined in classes, and a few other issues below.
If I have a form-horizontal with a form-group inside, and that form-group encapsulates a label, an input field, a button and a toggle switch all on the same line, how do I define it in my media query for mobile so that the label and input field stay on the same line and the button and toggle switch are wrapped on the same second line?
At the moment when viewed in mobile view the button and toggle switch seem like they float to the right sort of above the input field...I have tried defining form-inline, but I dont want any form-inlines in my form-horizontal, only form-groups...
I also have not specified sections in my long form, so instead I have individual div headers to signify each sections of the form, so does seem fine to do with a form?
I also am having a problem with my select dropdown lists. When I specify them to have width of 100% they dont span the width of their column width, the only way I can specify is to give them a fixed width, but then they dont become responsive....
Any ideas?
Thanks
<div class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
<label for="fname" class="col-md-2 control-label custom-label">First name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputfname" placeholder="" focus>
</div>
</div>
<div class="form-group">
<label for="lname" class="col-md-2 control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-md-2 control-label custom-label">Gender</label>
<div class="col-md-2">
<div class="toggle-input-btn-two">
<div class="slider-two"></div>
<span class="male">Male</span>
<span class="female selected">Female</span>
</div>
</div>
<div class="btn-group col-md-5">
<a class="btn btn-default dropdown-toggle btn-select gender"
data-toggle="dropdown" href="#">Other <span class="caret"></span>
</a>
<ul class="dropdown-menu inline">
<li>gender</li>
<li>gender</li>
<!-- <li class="divider"></li>
<li><a href="#">
<span class="glyphicon glyphicon-star"></span> Other</a></li> -->
</ul>
</div>
<div class="col-md-2">
<div class="toggle-input-btn-three">
<div class="slider-three"></div>
<span class="private3">Private</span>
<span class="public3 selected">Public</span>
</div>
</div>
</div>
<div class="headers">
<h3>Next Section</h3>
</div>
css
.form-horizontal .form-group{ padding: 0 15px;}
.form-horizontal .form-group .custom-label{ text-align: left; padding-left: 0; margin-top: -10px; font-size: 1.7em; font-weight: normal; color: #fff;}
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; padding: 0px 10px; border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:focus { border-color: #f47929; }
/* DROPDOWN MENU STYLING */
.btn-group .btn-default { color: #fff; background-color: #4d4d4d; border: none; font-size: 1.2em; border-radius: 3px;}
.btn-group .dropdown-toggle {position: relative; overflow: hidden; padding-right: 24px /* Optional for caret */; text-align: left; text-overflow: ellipsis; }
.btn-group ul.dropdown-menu {width: 96%; margin-left: 15px; }
.btn-group .dropdown-toggle.gender {position:relative; width: 567px; margin-left: 10px; }
.btn-group .dropdown-toggle.account {position:relative; width: 780px; }
.btn-group ul.dropdown-menu.inline { width: 567px; margin-left: 25px;}
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { position: absolute; right: 12px; top: calc(50% - 2px);}
.toggle-input-btn-two {
width: 200px;
height: 38px;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
color: #FFF;
background-color: #F47929;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-family: 'Lato', verdana, sans-serif; font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/ cursor: pointer;
}
.toggle-input-btn-three {
width: 200px;
height: 38px;
left: 60%;
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
color: #FFF;
background-color: #F47929;
border: 2px solid #FCD7BC;
border-radius: 3px;
line-height: 34px;
font-family: 'Lato', verdana, sans-serif; font-size: 1.3em;
/* -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
*/ cursor: pointer;
}
.toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span
{ width: 50%; height: 100%; float: left; text-align: center; cursor: pointer; -webkit-user-select: none;}
.toggle-input-btn-two div,
.toggle-input-btn-three div { width: 100px; height: 80%; top: 50%; left: 2%; transform: translateY(-50%); position: absolute; background-color: #FFF; border-radius: 3px;}
.toggle-input-btn-three div { border: 2px solid #aaa;}
.toggle-input-btn-two div {border: 2px solid #b3b3b3;}

Answer 1

Are you using Bootstrap 3? The documentation provides a nice illustration of the grid system: http://getbootstrap.com/css/#grid. To take advantage of bootstrap's grid, I'd wrap each set of elements that should stay together on "xs" in their own div with a class of .col-xs-12. Translated, "Hey, when you're in the "xs" world, take up the whole row." Then additionally, give it a class of .col-sm-6 so that once you hit 768px wide, each div will take up half the row.