Блог

У меня есть изображение рядом с текстом, которое выровнено по вертикали с изображением на больших экранах. Смотрите код ниже и прикрепленное изображение.

 <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-->
  

Я бы хотел, чтобы высоты двух столбцов оставались неизменными до тех пор, пока изображение не будет складываться поверх текста с разрешением 992px (точка останова boostrap для больших). Я хотел бы сохранить внешний вид текста рядом с изображением до тех пор, пока не произойдет разрыв (см. Изображение). Каков наилучший способ сделать это с помощью boostrap 4? Размер текста должен быть уменьшен, чтобы поместиться рядом с изображением, когда экран становится меньше?

Установка h-100 класса для каждого col элемента заставит их соблюдать высоту row элемента:

 <main><div class="row">
  <div class="col-lg-6 h-100 border border-danger">
    <!-- left content-->
  </div>
  <div class="col-lg-6 h-100 border border-danger">
    <!-- right content-->
  </div>
</div></main>