Currently, this webpage appears as follows: I attempted to organize the images in row 2 of the grid but the outcome was reversed
Upon resizing to a mobile screen and switching to a flex column layout: I tried to address the overflow issue
The HTML code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Responsive Layout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07776877776275296d7447362936312937">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-lg-4 col-xl-5">
<h2>PROTECT YOUR BUSINESS WITH OUR NHS ASSURED FACE VISOR</h2>
<p>Designed with care and comfort in mind</br>
Our innovative face visor is designed with care, comfort, and personalization in mind. Developed specifically to help during COVID-19, you can be assured of a product that meets NHS standards, protecting your business, staff, and yourself.</p>
<p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a>
<a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<img src="img/3-layers.png">
</div>
</div>
<div class="row my-5">
<div class="col-md-12 col-lg-4 col-xl-5">
<h2>OUR UNIQUE RAMFOAM CARE PROCESS IS AS SAFE AS OUR VISOR</h2>
<p>We can fully brand your face visor to match your company colors and deliver hundreds of thousands of visors to you safely and securely. Our process ensures safety and involves creating a comfortable, adjustable, and reusable PPE item including
a medically approved hypoallergenic foam headpiece with a fully replaceable anti-fog visor system delivered in two pieces for easy storage and self-assembly.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-md-6 col-lg-4 col-xl-5">
<h2>PROTECT YOUR BUSINESS WITH THE BEST IN THE BUSINESS</h2>
<p>Receive your visors within five working days. Our innovative face visor is designed with care, comfort, and personalization in mind. Developed specifically to help during COVID-19, you can be assured of a product that meets NHS standards, protecting
your business, staff, and yourself.
</p>
<p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a>
<a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-5">
<div class="card bg-default">
<div class="card-body">
<h4 class="text-center text-uppercase my-3">contact sales</h4>
<p class="text-center mb-4">Please drop us an email through the form below, and we'll be in touch within 24 hours.</p>
<form role="form">
<div class="form-group">
<input class="form-control" placeholder="NAME" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="EMAIL" type="email">
</div>
<div class="form-group">
<input class="form-control" placeholder="PHONE" type="number">
</div>
<div class="form-group">
<textarea class="form-control textarea-custom" rows="3" placeholder="MESSAGE"></textarea>
</div>
<div class="form-group">
<button class="btn btn-light text-right text-uppercase" type="button">submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>I attempted to customize the Bootstrap template, and after saving the code, I encountered an overflow issue (non-responsive)