CSS 2列布局，带有2个固定高度的图像

Question

我正在尝试以最佳方式获得所附图像中详细说明的结果，但是由于某种原因，我找不到任何能够勾勒出所有框的解决方案。

桌面版本-图像的高度固定为600px，但是宽度在调整大小时必须始终保持相同的纵横比。另外，左栏的标题，段落和按钮是最先流动的，但是当其达到最小宽度时，图像栏必须开始调整大小。

在移动设备上，需要更改顺序，以便按钮位于图像下方，但它们仍将其宽高比保持在宽度和高度之间，以填充容器。

我尝试使用flex，grid，但是我发现最接近的结果是使用老式的display：inline-block，但是在切换块的顺序时会出现一个问题，可以使用轻松修复弹性或网格。图片部分特别棘手。

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>