CSS 2 колонки с двумя изображениями с фиксированной высотой

Question

Я пытаюсь добиться результата, детально описанного в изображениях, прикрепленных наилучшим образом, но по какой-то причине я не могу найти никакого решения, которое помечает все поля.

Настольная версия - Изображения 'высота установлена ​​на 600px, но ширина всегда должна сохранять одинаковое соотношение сторон при изменении размера.Кроме того, левый столбец с заголовком, абзацами и кнопками - тот, который должен быть сначала жидким, но когда он достигает минимальной ширины, столбец изображений должен начать изменять размер.

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

Я пытался использовать flex, grid, но самые близкие результаты, которые я нашел, были при использовании старого доброго display: inline-block, но это создает проблему, когдапереключение порядка блоков, которые можно легко исправить с помощью flex или grid.Часть изображений особенно сложна.

Answer 1

Я думаю, что это может быть достигнуто с помощью классов начальной загрузки.

Я создал демонстрацию в фрагменте кода ниже, используя встроенные классы начальной загрузки.

Надеюсь, это поможет

.heading,.paragraph,.buttons{
                    border: 1px solid #000;
                    padding: 15px;
                    background: #ccc;
                }
                
                .img-div img{
                    height: 600px;
                    width: 100%;
                }
                
                @media (max-width:767px){
                   .img-div img{
                        height: 300px;
                        width: 100%;
                    } 
                }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
                <div class="col-lg-5 col-md-5 col-sm-12 col-12">
                    <div class="heading">
                        <h1>Heading</h1>
                    </div>
                    <div class="paragraph">
                        <h1>Paragraphs</h1>
                        <p>Paragraph Content</p>
                    </div>
                    <div class="buttons d-none d-sm-block">
                        <h1>Buttons</h1>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <button class = "btn btn-primary">Button 1</button>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <button class = "btn btn-primary">Button 2</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-12 col-12">
                    <div class="row">
                        <div class="col-lg-8 col-md-8 col-sm-8 col-8">
                            <div class="img-div">
                                <img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                            <div class="img-div">
                                <img src="https://picsum.photos/500/600" height = "600" class = "img-responsive">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-12 d-sm-none">
                        <div class="buttons ">
                            <h1>Buttons</h1>
                            <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                        <button class = "btn btn-primary">Button 1</button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                        <button class = "btn btn-primary">Button 2</button>
                                    </div>
                            </div>
                        </div>
                    </div>
                
            </div>