Repositioning form after image removed from display - css

Question

In the following code, I have an image that I do not want shown on small screens (at the bottom). When the viewport is shrunk, the input fields are a left justified. I'd like them to be in the center of the viewport when the screen is XS. I've tried changing the Bootstrap 4 flex settings, but have yet to find a solution. Is there a way to do this in Bootstrap or SASS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}

Answer 1

You can use media queries to provide additional styles at specific breakpoints.
#media (max-width: 575px) {
.row.center-on-xs{ margin: 0 auto; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row center-on-xs justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}