If you're looking to change things up from the usual row and col classes, consider using the versatile flex classes.
- To initiate flex behavior, simply apply
d-flex.
- For a default column layout with reverse order, use
flex-column-reverse.
- When the viewport is larger than small, switch to a row layout with
flex-md-row, without any reverse order.
- Similarly, utilize
col-md-6 to split each row column into half of Bootstrap's 12-part grid system on larger viewports.
<section>
<div class="container text-left mt-5">
<div class="d-flex flex-column-reverse flex-md-row">
<div class="col-md-6">
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<br>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that their CCTV system is working 24/7 to keep their employees, customers, and partners safe.
<br />
<br />
So when something goes amiss it is of utmost importance to get the right CCTV Support that has technicians who are equipped with the tools needed to get your CCTV system back online. So whether your cameras receive their power through LTE, solar energy, or anything in between we have the necessary equipment to get you back into action.
<br />
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</p>
</div>
<div class="col-md-6">
<!-- <div class="col"> -->
<img src="https://picsum.photos/seed/picsum/300/300" class="img-fluid rounded float-start mb-3" alt="IT technician working">
<!-- </div> -->
</div>
</div>
</div>
</section>