Rearrange divs in certain way when resizing - html

Question

I have created flexbox to rearrange the boxes. Here is the demo code
The problem is that when I resize for smaller screen, I want to insert B between A and C.
How can I achieve that ? Thanks in advance.

Answer 1

grid is the grid-system you may need for this kind of layout.
here is a short example
/* let make a grid of 2 columns */
.main {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 20px;
}
/* b should span through 2 rows */
.b {
grid-row: span 2;
}
/* clear the grid system on small screen */
#media (max-width: 639px) {
.main {
display: block;
}
}
/* original styling for bg */
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
<div class="main">
<div class="a">A - I have some content</div>
<div class="b">B - I have some content</div>
<div class="c">C - I have some content</div>
</div>
As you can see, you may need little HTML and CSS to get this organized. Mind to set your media query in last position so it is not overridden ;)
see https://css-tricks.com/snippets/css/complete-guide-grid/ to dig further into grid

Answer 2

Here a solution that gather all classes a b and c in one container:
html code :
<div class="main">
<div class="container-1">
<div class="a">A - I have some content</div>
<div class="b">B - I have some content</div>
<div class="c">C - I have some content</div>
</div>
</div>
CSS code :
.a {
background-color: red;
height: 20px;
}
.b {
background-color: green;
height: 30px;
}
.c {
background-color: blue;
height: 20px;
}
.container-1 div{
width: 45%;
display: inline-block;
}
#media (max-width: 639px) {
.container-1 div {
width: 100%;
display: block;
}
}

Answer 3

I think it would be easier using grid instead flex:
HTML
<div class="main">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
CSS
.main {
display: grid; /* If you don't wanna add a gap between blocks, put this attribute into the media query */
gap: 1rem; /* To add a gap between blocks */
}
.a {
background: red;
}
.b {
background: green;
}
.c {
background: blue;
}
#media (min-width: 768px) {
.main {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.a {
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 2 / 3 / 3;
}
.c {
grid-area: 2 / 1 / 3 / 2;
}
}