Using this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
If you resize the window to the smallest size, the grid breaks.
Here is the Bootply link.
Just open the preview and resize your window to the smallest size, and the grid will break.
3 columns must stay in the same row, but in the smallest size, the last column shifts to the bottom row.
This happens in both versions (4 & 3.7 (col-xs-2))
how can this be fixed?