根据尺寸的替代布局

Question

I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.

The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.

Any direction on this issue would be very helpful.

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .header{ text-align: center; border: 2px solid blue; } .footer { position: absolute; right: 0; bottom: 0; left: 0; background-color: #efefef; text-align: center; border: 2px solid blue; } h1{ margin: auto; } .body{ border: 2px solid blue; margin-top: 10px; } .inline{ display: inline-block; } .no-margin{ margin: 0px; } label{ width: 140px; margin-right: 5px; text-align: left; white-space: nowrap; } input{ margin-left: 0px; margin-top: 10px; } .left_margin{ margin-top: 10px; margin-left: 230px; } @media screen and (min-width: 768px){ label{ text-align: right; } input{ margin-left: 10px; margin-top: 10px; } } 

 <div class="col-lg-12 header"><h1 class="lead">Test</h1></div> <div class="body"> <div class="container"> <form class="form-inline" role="form"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline"> <label for="input_test" class="control-label inline">Label</label> <div class="form-group"> <div> <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin"> </div> </div> </div> </div> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 1

1. The id must be unique.

2. col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6 .

3. Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.

4. I guess you need to use the Horizontal form instead of the Inline form .

5. Place labels into <div class="form-group"></div> blocks.

6. Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.

Please check the result:

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .header{ text-align: center; border: 2px solid blue; } h1.lead { margin: 0; padding: 12px; } .body{ border: 2px solid blue; margin-top: 10px; padding-top: 12px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-horizontal .control-label { display: block; float: left; margin-bottom: 0; margin-right: 20px; padding-top: 7px; white-space: nowrap; } .form-horizontal .form-control { width: 100%; } .fill-free-space { overflow: hidden; } 

 <div class="header"><h1 class="lead">Test</h1></div> <div class="body"> <div class="container"> <form class="form-horizontal" role="form"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="input_left_1" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_left_1" placeholder="Left"> </div> </div> <div class="form-group"> <label for="input_left_2" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_left_2" placeholder="Left"> </div> </div> <div class="form-group"> <label for="input_left_3" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_left_3" placeholder="Left"> </div> </div> <div class="form-group"> <label for="input_left_4" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_left_4" placeholder="Left"> </div> </div> <div class="form-group"> <label for="input_left_5" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_left_5" placeholder="Left"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="input_right_1" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_1" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_2" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_2" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_3" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_3" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_4" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_4" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_5" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_5" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_6" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_6" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_7" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_7" placeholder="Right"> </div> </div> <div class="form-group"> <label for="input_right_8" class="control-label">Label</label> <div class="fill-free-space"> <input class="form-control" type="text" id="input_right_8" placeholder="Right"> </div> </div> </div> </div> </form> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>