Бутстрэп-столбцы в строке перекрываются тегом изображения тимелина

Question

У меня есть div содержит строку с 2 столбцами.Левый столбец содержит изображение, а правая часть содержит текст.Я пробовал сотни разных комбинаций, но не мог понять, как избежать дублирования проблем.Как вы можете видеть изображения, когда я начинаю изменять размер окна, оно начинает перекрываться.

<div class="py-5">
    <section class="my-5"><!-- Section -->
        <div class="container"><!-- Container -->
            <div class="row"><!-- Grid row -->

                <!-- Grid column -->
                <div class="col-xs-12 col-md-6">
                    <img th:src="@{/img/about.jpg}" src="" alt="">
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-xs-12 col-md-6">
                    <!-- Section heading -->
                    <h1 class="h1-responsive font-weight-bold mb-4">About Us</h1>
                    <!-- Section description -->
                    <p class="lead grey-text mx-auto">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                        when an unknown printer took a galley of type and scrambled it to make a type
                        specimen book. It has survived not only five centuries, but also the leap into
                        electronic typesetting, remaining essentially unchanged. It was popularised in
                        the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                        and more recently with desktop publishing software like Aldus PageMaker
                        including versions of Lorem Ipsum.
                    </p>
                </div>
                <!-- Grid column -->

            </div><!-- Grid row -->
        </div><!-- Container -->
    </section><!-- Section -->
</div>

Мне бы хотелось иметь верхнюю границу, когда она маленькаяКроме того, чтобы иметь четкое разделение.

ОБНОВЛЕНИЕ

Райан Маффи, ваше решение работает хорошо до определенного момента.Это результат как раз перед тем, как перейти на мобильный просмотр.Выглядит так плохо в этот момент.Я хотел бы иметь изображение в отдельном ряду, если оно уменьшается более чем на 50%.Возможно ли это?

ОБНОВЛЕНИЕ 2

Я наконец нашел комбинацию, которую искал.Этот результат решил все мои проблемы.

<div>
    <section>
        <div class="container">
            <div class="row">

                <div class="col-md-12 col-lg-6 my-4">
                    <img style="width: 100%;" th:src="@{/img/about.jpg}" alt="">
                </div>

                <div class="col-md-12 col-lg-6 my-4">
                    <h1 class="h1-responsive font-weight-bold mb-4">Header</h1>
                    <p class="lead grey-text mx-auto">Lorem ipsum...</p>
                </div>

            </div>
        </div>
    </section>
</div>

Answer 1

Похоже, что изображение переполняет столбец.

Добавление CSS width: 100% к изображению будет означать, что оно всего лишь ширины столбца, в котором оно находится.

Answer 2

В мобильном представлении необходимо центрировать изображение по вертикали.Просто используйте стиль родительского div этого изображения для display: inline-block; height: 100%; vertical-align: middle;, а для этого изображения - vertical-align: middle; max-height: 100px;