Column contents stacking on small displays - css

Question

There are similar answers here, but people wanting to know how to stack their columns on XS display, I want them to STOP stacking.
I have two columns, and for some reason their contents are stacking at some displays. I'm using Bootstrap 4
320 px (XS) display :
480 px (XS) display, this is the only correct one :
800 px (MD) display :
Why are the contents stacking? I don't understand.
Code:
<div class="row justify-content-between">
<div class="input-group col-md-4 col-12 text-center">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">
<!-- Display none in smaller than sm -->
<span class="d-none d-md-block">Exportar</span>
<!-- Display none in md or larger -->
<i class="material-icons d-md-none">file_download</i>
</button>
</div><select class="custom-select text-center" id="tipo_exportar">
<option value="1">
Kml
</option>
<option value="2">
Csv
</option>
</select>
</div>
<div class="col-md-8 col-12 text-center">
<div class="btn btn-outline-primary">
<i class="material-icons">autorenew</i>
</div>
<!-- Boostrap Multiselect -->
<select id="hide_fields" multiple="multiple">
</select>
</div>
</div>
Another question, I'm using Bootstrap Multiselect, but it doesn't occupy all the space as the regular Boostrap custom select, how I can make them line up? And how can I add some extra vertical space between the two columns?
Most of the utility classes I'm using were try and error, I'm open to suggestions on how to better layout my buttons as I'm very new at Bootstrap

Answer 1

I would recommend re-structuring your code somewhat, to make use of input-group and Bootstrap's Grid correctly. These two should not be combined. Rather; you should wrap input-group in a col-*-* element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 mb-4 md-md-2">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary">
<span class="d-none d-md-block">Exportar</span>
<span class="material-icons d-block d-md-none">file_download</span>
</button>
</div>
<select class="custom-select text-center" id="tipo_exportar">
<option value="1">Kml</option>
<option value="2">Csv</option>
</select>
</div>
</div>
<div class="col-12 col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<div class="btn btn-outline-primary">
<span class="material-icons">autorenew</span>
</div>
</div>
<select class="custom-select" id="hide_fields" multiple="multiple">
<option value=""></option>
</select>
</div>
</div>
</div>
</div>
A couple of notes on the above code:
(1) You will need to expand the snippet or view this same code on Bootply ( https://www.bootply.com/gCYqfuhpIe )
(2) You seem to be using additional CSS to modify the look/feel of Bootstrap. This answer shows you the default styles of Bootstrap 4, which are noticeably different in terms of border radius as well as how it handles a <select> with the multiple attribute. Depending on how extensively your CSS alters Bootstrap adopting this layout to that CSS might require additional work.

Answer 2

In this line
<div class="col-md-8 col-12 text-center">
add the col-xs-12class to allow the full horizontal space for its contents. So that's:
<div class="col-xs-12 col-md-8 col-12 text-center">