I am using Bootstrap 5 to make a website and I am trying to make the website more responsive across all devices. I currently like the way my about page looks on desktop, tablet, and laptop breakpoints, but when someone is using a mobile device I want the div that holds the image to be above the div that contains the header and paragraph text, but I am not sure how to do that.
This is what it currently looks like on mobile 
##Test.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | </title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- <link rel="stylesheet" href="/css/index.css" /> -->
<link rel="stylesheet" href="./css/about.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
</head>
<body>
<!-- ABOUT US SECTION START -->
<section>
<div class="container text-start mt-3">
<div class="row">
<div class="col">
<h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
<br>
<!-- <br> -->
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</div>
<div class="col">
<img src="./src/img/about-001.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION CLOSE -->
Test.css
h3:after {
background: none repeat scroll 0 0 hsl(210, 55%, 41%);
bottom: -10px;
content: "";
display: block;
height: 2px;
position: relative;
width: 100px;
}
@media (min-width: 300px) {
}
h3:after {
background: none repeat scroll 0 0 hsl(210, 55%, 41%);
bottom: -10px;
content: "";
display: block;
height: 2px;
position: relative;
width: 100px;
}
@media (min-width: 300px) {
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | </title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- <link rel="stylesheet" href="/css/index.css" /> -->
<link rel="stylesheet" href="./css/about.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
</head>
<body>
<!-- ABOUT US SECTION START -->
<section>
<div class="container text-start mt-3">
<div class="row">
<div class="col">
<h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
<br>
<!-- <br> -->
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</div>
<div class="col">
<img src="./src/img/about-001.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION CLOSE -->
>Solution :
Try This:
Note: I replaced your image with a dummy image for the snippet to work
h3:after {
background: none repeat scroll 0 0 hsl(210, 55%, 41%);
bottom: -10px;
content: "";
display: block;
height: 2px;
position: relative;
width: 100px;
}
@media (min-width: 300px) {
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | </title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- <link rel="stylesheet" href="/css/index.css" /> -->
<link rel="stylesheet" href="./css/about.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
</head>
<body>
<!-- ABOUT US SECTION START -->
<section>
<div class="container text-start mt-3">
<div class="row">
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
<br>
<!-- <br> -->
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</div>
<div class="col-md col-12 order-0 order-md-1">
<img src="https://picsum.photos/200" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION CLOSE -->Explanation:
I changed col to col-md for both the text and the image so the columns get dynamic width only after a certain(intermediate) screen width.
I added col-12 for the image and the text so they take full width and collapse on top of each other below intermediate screen width.
I used order-md-x and order-x to order the items at different screen width.