CSS 2 columns layout with 2 fixed height images - html

Question

I'm trying to achieve the result detailed in the images attached in the best way possible but for some reason I can't find any solution that ticks all the boxes.
Desktop version - The images' height is fixed to 600px, but the width must always keep the same aspect ratio on resize. Also, the left column with the heading, paragraphs and buttons is the one to be fluid first, but when it reaches its min-width, then the images column must start to resize.
On mobile, the order needs to change so that the buttons go underneath the images, but they still keep their aspect ratio between their width and height to fill the container.
I've tried using flex, grid, but the closest results I'd found was by using good-old display:inline-block, but that presents an issue when switching the order of blocks which can easily be fixed by using flex or grid. The images part is particularly tricky.

Answer 1

I think it can be achieved via bootstrap classes.
I have created a demo in the code snippet below using inbuilt bootstrap classes.
Hope it helps
.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>