Align 3 elements using flexbox [duplicate] - html

Question

This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 4 years ago.
I have 3 div elements which I want to put in 2-columns. One of them I want to fill in the first column vertically and the others to fill the next column in 2
separate rows. (Run code snippet to see the sections)
.news-feed {
display: flex;
flex-flow: row wrap;
}
.image {
flex-direction: column;
height: 20px;
}
.title_date {
flex-direction: column;
}
.job-description {
flex-direction: column;
}
<section class="news-feed">
<section class="image">
<img src= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA'/>
</section>
<section class="title_date">
<p class="date">27 Dec 1997</p>
<h3 class="title">Urgent Job offer</h3>
</section>
<section class="job_description">
<p class="job_info">This is a job for speacial people like you. Long text bla bla bla. The main issue is that I cannot put the 'title_date' and 'job_description' section in a single div because I want to put the 'title_date' at top of 'image' section when the device is mobile. Any workaround idea is highly appreciated. Thanks</p>
<p class="tags">Jobs, HighPay, Carrer</p>
</section>
</section>
The main issue is that I cannot put the 'title_date' and 'job_description' section in a single div because I want to put the 'title_date' at top of 'image' section when the device is mobile. Any workaround idea is highly appreciated. Thanks

Answer 1

This is easily achieved if you just use grid not flex in your css files. Then you won't need any JavaScript. Just change your CSS code like this:
.news-feed {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 50% 50%;
grid-template-areas:
"image title_date"
"image job_description"
}
.image {
grid-area: image;
}
.title_date {
grid-area: title_date;
}
.job-description {
grid-area: job_description;
}
#media screen and (max-width: 425px) {
.news-feed {
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"title_date"
"image"
"job_description"
}
}
This will position image on the left in desktop mode and in the middle on the mobile version. You can of course change the columns and rows height and width as you want.

Answer 2

wrap "title_date" and "job_description" in one section and give them flex-direction: column; and inside that wrapper div give flex-direction: row; css to this two div "title_date" and "job_description"

Answer 3

I had to go javascript way to resolve this.
For this, I look into the "window.innerheight" property and according to it, I either wrap the "title_date" and "job_description" inside a new section (for normal display) or separate them and give them required flexbox ordering (for mobile display).