Bootstrap V4 form-inline to stacked - css

Question

I currently have a small form with 3 elements, a label, input, and button.
I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.
This is the code I have so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="col-auto pb-3 ml-auto">
<form class="form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<button class="btn btn-primary" type="submit" }>Submit</button>
</form>
</div>

Answer 1

#media (min-width: 768px) {
.my-form-inline {
display: flex;
flex-flow: row nowrap;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
<form class="my-form-inline" method="post">
<div class="form-group mx-sm-3 mb-2">
<label for="refined_search">Refine Search: </label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input id="refined_search" type="text" name="refined_search">
</div>
<div class="form-group mx-sm-3 mb-2">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</div>
</form>
</div>

Answer 2

One way of achieving this is using Media query in CSS, unless that's not what you are looking for.
In your HTML file add below meta code to head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.
In CSS , use media queries
#media only screen and (min-width: 600px) {
#test{
display: block;
}
}
#media only screen and (min-width: 768px) {
#test{
display: inline-flex;
}
}