Bootstrap inline form not responsive to low width?

Question

I made an inline form using bootstrap. This does not work if I try to minimize or reduce the width of the browser. Not sure, but the built-in seat belt forms do not respond? The controls just blended with each other. I can not change the design of the page. Please advise how I can fix this so that the work is not erratic and responsive in a clean and understandable way.

A full width form when it is OK:

Form in a mini-browser or when reducing the width of the screen:

Here is my markup:

<div class="row">
    <div class="col-md-4">
    <div class="col-md-3">
    Round:
    </div>

    <div class="col-md-1">
    <input class="form-control" type="text" id="roundNumber"  value="<%= Model.Round %>" />
    </div>
    </div>
    <div class="col-md-4">
    <input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
    </div>
    <div class="col-md-4">
    <input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history"></div>        
</div>

Answer 1

.col-xs- md :

<div class="row">
    <div class="col-xs-4">
        <div class="col-xs-3">Round:</div>
        <div class="col-xs-1">
            <input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>">
        </div>
    </div>
    <div class="col-xs-4">
        <input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
    </div>
    <div class="col-xs-4">
        <input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history">
    </div>
</div>