Objective:
Arrange the component names in two columns - left and right, with different objects like input textboxes based on a browser width of 981px. The desired layout is showcased in this link "https://jsfiddle.net/2w9kskr2/".
Challenge:
After implementing the solution "@@media screen and (min-width: 981px) {" (https://jsfiddle.net/jdvdpwwj/), the outcome does not match the expected presentation as described in the goal (https://jsfiddle.net/2w9kskr2/).
Information:
The Bootstrap version being used is v2.
.div-table{
display:table;
width:auto;
border-spacing:5px;/*cellspacing:poor IE support for this*/
}
.div-table-row{
display:table-row;
width:auto;
clear:both;
}
.div-table-col{
float:left;/*fix for buggy browsers*/
display:table-column;
width:150px;
}
.div-table-col2{
float:left;/*fix for buggy browsers*/
display:table-column;
width:415px;
}
#A, #Text, #From, #T {
width: 421px;
} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">
<label for="A">A</label>
</div>
<div class="div-table-col2">
<input id="A" name="A" placeholder="A" value="" type="text">
</div>
</div>
<div class="div-table-row">
<div class="div-table-col">
<label for="T">T</label>
</div>
<div class="div-table-col2">
<input id="T" name="T" placeholder="T" value="" type="text">
</div>
</div>
<div class="divRow">
<div class="div-table-col">
From
<br/>
</div>
<div class="div-table-col2">
<button id="From" style="margin-bottom:10px;" title="122344" data-id="From" type="button" class="btn dropdown-toggle form-control selectpicker btn-default" data-toggle="dropdown"><span class="filter-option pull-left">122344</span> <span class="caret"></span></button>
<br/>
</div>
</div>
<div class="divRow">
<div class="div-table-col">DD & DD</div>
<div class="div-table-col2">
<select id="SSS" style="max-width: 200px;"></select>
<select id="SSS" style="max-width: 200px;"></select>
</div>
</div>
<div class="div-table-col">
<label for="AWB">Message </label>
</div>
<div class="div-table-col2">
<textarea name="Text" id="Text" cols="10" rows="10" class="input-large">
</textarea>
</div>
</div>