I am working on a code where I want to hide an image on small screens and center the input fields when the screen size is XS. I have tried adjusting the Bootstrap 4 flex settings without success. Is there a way to achieve this using 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 %}