I'm attempting to design a nested Bootstrap grid for a phone number input. The concept is to have a label for the phone number, and it's fine if on smaller screens the "label" and "phone group" stack. However, I want to maintain the inline layout of the 3 phone inputs without stacking them. I am unsure of how to achieve this using the appropriate inline classes in this particular situation.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col-md-5">
<label for="ph1">Label</label>
<input type="text" class="form-control" id="label">
</div>
<div class="col-md-5">
<div class="form-inline">
<div class="col-md-3">
<label for="ph1">Country</label>
<input type="text" class="form-control" id="ph1">
</div>
<div class="col-md-3">
<label for="ph2">Area</label>
<input type="text" class="form-control" id="ph2">
</div>
<div class="col-md-6">
<label for="ph3">Number</label>
<input type="text" class="form-control" id="ph3">
</div>
</div>
</div>
</div>