bootstrap 3 : display items in separate rows on mobile device

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">
                            <a href="#members" title="members"><i class="fa fa-users fa-1x"></i>&nbsp;Members</a>
                        </li>
                        <li><a href="#" title="Join Requests"><i class="fa fa-plus fa-1x"></i>&nbsp; Join Requests</a></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><a href="group.html">group 01</a></td>
                                                <td>test</td>
                                                <td>test</td>
                                                <td>Ag223B3</td>
                                            </tr>
                                            <tr>
                                                <td><a href="group.html">group 01</a></td>
                                                <td>test</td>
                                                <td>tset</td>
                                                <td>Ag223B3</td>
                                            </tr>
                                            <tr>
                                                <td><a href="group.html">group 01</a></td>
                                                <td>est&gt;
                                                </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"><a href="#" title="members"><i class="fa fa-users fa-2x"></i></a></li>
                  <li><a href="#" title="join requests"><i class="fa fa-plus fa-2x"></i></a></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>