The flex layout will start with three columns. When the window becomes smaller, we will have a two-column layout. The first column will be on its own row, and the middle/right will share the space on the second row. When the window is resized to even smaller width, then the left column will take one top row, middle takes the middle row and the left takes the third row. This has been implemented in the code. The pictures are attached for reference.
There are two problems to tackle:
- The first image has the gap to be between column 1 and 2, it needs to be between columns 2 and 3.
- The description needs to span the entire space of the middle column when there are three columns, or the entire width when there are two columns or one column.
I am looking for a solution that doesn't rely on media queries nor external libraries. Thank you in advance!
* { margin: 0px; padding: 0px; }.large { font-size: 32px; }.medium { font-size: 24px; }.small { font-size: 16px; }.container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0px 32px; justify-content: space-between;}.child { display: flex; flex-wrap: wrap; flex-direction: row; flex: 1; gap: 0px 32px;}<section class="container large"><h3>Education</h3><div><div class="child medium"><div><h4>Degree/diploma</h4><div>University</div></div><div><span>From Date – To Date</span></div></div><div class="small">Description</div></div></section>