CSS Flexbox - First child to be equal height [duplicate] - css

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
What I am trying to achieve is when the layout breaks down to mobile the image block matches the same height as the title/content blocks.
The layout is quite tricky, it works as expected on desktop view with the title block being at the top full width. I think the issue is using flex-wrap: wrap on the mobile view? (I have got this layout working using CSS grid but unfortunately it cannot be used on production)
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
}
.title {
background: tomato;
width: 50%;
}
.image {
background: cornflowerblue;
width: 50%;
height: 150px;
}
.content {
background: gold;
width: 50%;
}
<div class="wrapper">
<div class="image">img</div>
<div class="title">title</div>
<div class="content">content</div>
</div>
http://jsfiddle.net/8dvhew3q/4/

Answer 1

use this code
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-end;
}
.title,
.image,
.content {
width: 50%;
}
.title {
background: tomato;
}
.image {
background: cornflowerblue;
}
.content {
background: gold;
}
#media only screen and (min-width: 800px) {
.title {
width: 100%;
order: 1;
}
.image {
order: 2;
height: 150px;
}
.content {
order: 3;
}
}