form element alignment problem with bootstrap 3 - html

Question

I am using bootstrap 3 for my form design. i am using below structure.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months">
</div>
</div>
</div>
</div>
This layout is working well. But problem is, sometimes i need to hide "monthData" division. When i hide it, there is a empty space right side of the row. how i avoid this.
As a solution i tried to change my layout as below.
<div class="row">
<div class="col-md-6">
form elements
</div>
<div class="col-md-6">
form elements
</div>
</div>
According to my solution, empty space issue is fixed. But Tab index is going up to down. but i need to left to right.
Can you help me to solve these issues. any one know better structure??

Answer 1

Add the tabindex attribute to the input with value in the required sequence.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="1">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="3" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="2" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="9" />
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control" tabindex="6" />
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">
</div>
</div>
</div>
</div>