Boostrap 4 has been used to create a .form-inline at the bottom of the page. It appears correctly when the viewport is larger than the XS breakpoint...
https://i.sstatic.net/UYaG7.png
...but encounters issues when switching to XS view...
https://i.sstatic.net/IL34O.png
...based on my understanding, the subscribe button should move below the input field in XS view.
Here is the code that was implemented...
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
</div>
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</form>
</div>
...the issue was resolved by placing the button within the same form-group div as the input element...
<div class="col-md-6 col-lg-4 order-first order-md-6 align-self-center">
<form class="form-inline justify-content-center">
<div class="form-group">
<input type="email" class="form-control mr-2 mb-2" id="EmailInpue" placeholder="Join our Mailing List" />
<button type="submit" class="btn btn-primary mb-2"><i class="far fa-envelope-open"></i> Subscribe</button>
</div>
</form>
</div>
...although generally, according to Bootstrap guidelines, the button should be outside of the form-group.
In any case, this adjustment seems to have fixed the problem.