bootstrap 3 : display items in separate rows on mobile device - twitter-bootstrap-3

Question

i am creating a form where i want to display a input field and a header. here is my code
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="pull-left"><b>Hum Members</b></h4>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-10 col-xs-10">
<div class="visible-lg visible-md">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<i class="fa fa-users fa-1x"></i> Members
</li>
<li><i class="fa fa-plus fa-1x"></i> Join Requests</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="members">
<div class="table-responsive">
<table class="table table-hover table-borderless">
<thead>
<tr>
<th>Group Name</th>
<th>Created by</th>
<th>Moderator</th>
<th>Group ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>group 01</td>
<td>test</td>
<td>test</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>test</td>
<td>tset</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>est>
</td><td>test</td>
<td>Ag223B3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-2 visible-sm visible-xs">
<ul class="nav pull-right">
<li class="active"><i class="fa fa-users fa-2x"></i></li>
<li><i class="fa fa-plus fa-2x"></i></li>
</ul>
</div>
</div>
</div>
the header "Hub members" and "input field" are displayed in single line. On mobile phone it is displaying on same row as on desktop. what i want is to display it in separate rows on mobile phones. e.g.
hub members //header
user emails //input field
//rest of view i.e table
How can i resolve it.
Regards,
Following is demo code
Demo here

Answer 1

Is this what you're trying to achieve? Not really sure about your instructions.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
Or Probably this?
<div class="row">
<div class="col-md-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>