How to prevent bootstrap from "drop" at mobile screen size? - twitter-bootstrap-3

Question

For example, I have this
.form-group select {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-xs-12">
<div class="form-group form-inline">
<input class="form-control" type="number" name="currency_from_amount" id="currency_from_amount">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
When the screen become smaller, the dropdownlist "drop" into another row which is not what I want. How do I maintain to make it inline (two columns in one row) even it is mobile size?
Expected output is:
But current output is

Answer 1

Here is the solution for your expected output. You need to wrap the input and select box in a row by specifying the col size as per your requirement.
.container {
padding: 10px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
</div>