How to place elements like this - html

Question

I tried to set to parent block this:
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;
and it works, but it will break if, as example, the second block will be larger. So I am looking for another decision. (I cannot use css-grid)
Codepen Link
Image how it might looks

Answer 1

Try this
.bigger {
height: 300px !important;
}
.smaller {
height: 99px !important;
margin-bottom: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container-fluid">
<div class="row main">
<div class="col-sm-6">
<div class="col-sm-12"><p>
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi.
</p> </div>
<div class="col-sm-12">
<p>
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint optio laudantium dolorem doloremque non praesentium sit. Corporis quisquam soluta, ullam unde deleniti at expedita facilis animi dicta facere quam iste!
</p>
</div>
</div>
<div class="col-sm-6">
<p>
3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate.
</p>
</div>
</div>
</div>

Answer 2

Please have a look at the below working example below, hope it helps :)
body .child {
font-family: sans-serif;
}
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 90%;
margin: 0 auto;
}
.child {
margin: 10px;
padding: 50px 20px;
min-width: 39%;
box-shadow: inset 0 0 0 2px #000;
}
.parent {
max-height: none;
}
.child--1 {
order: 1;
}
.child--2 {
order: 3;
}
.child--3 {
order: 2;
padding: 100px 20px;
}
#media screen and (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
min-width: auto;
}
}
<div class="parent">
<div class="child child--1">Child 1</div>
<div class="child child--2">Child 2</div>
<div class="child child--3">Child 3</div>
</div>