On larger screens, I am trying to align text vertically next to an image. Below is the code and attached image for reference:
<div class="container-fluid">
<?php add_revslider('homepage'); ?>
<div id="front-page-1" class="row h-100">
<div class="col-lg-6">
<img src="https://via.placeholder.com/1500x1500?text=1500px+by+1500px" class="img-fluid" alt="temp" />
</div>
<div class="col-lg-6 my-auto">
<span>WHAT WE DO</span>
<h2>Defending Information Rights</h2>
<p>The BC Freedom of Information and Privacy Association (FIPA) is a non-partisan,
non-profit society that was established in 1991 to promote and defend freedom
of information and privacy rights in Canada. Our goal is to empower citizens by
increasing their access to information and their control over their own personal
information. We serve a wide variety of individuals and organizations through
programs of public education, public assistance, research, and law reform. We
are one of very few public interest groups in Canada devoted solely to the
advancement of freedom of information (FOI) and privacy rights.</p>
<p>We were the major force in getting BC’s Freedom of Information and Protection
of Privacy Act passed, and we are its main defender. This act has been called the
most progressive legislation of its kind in the world.</p>
<ul>
<li>We seek to empower citizens by increasing their right of access to
government-held information</li>
<li>We seek to empower citizens by promoting and defending the principle of
universal and affordable access to the basic information channels of our time</li>
<li>We seek to empower citizens by limiting the surveillance activities of the state,
and by increasing our right of access to our own personal information and our
ability to control the collection, use and sharing of our personal information,
wherever it is stored</li>
</ul>
</div>
</div>
</div> <!--end container-fluid-->
My objective is to maintain equal column heights until the screen width reaches 992px (Bootstrap breakpoint for large), at which point I want the image to stack on top of the text. How can I achieve this using Bootstrap 4? Also, as the screen size decreases, how can I reduce the text size to fit next to the image without affecting the layout?