Avoid flex-wrap gap for different size divs? - html

Question

I'm trying to achieve two different looks based on browser resolution only with CSS. The first fiddle works perfectly besides the weird space due to the rows needing to be the same size:
HTML:
<div id="box-container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
Mobile:
https://jsfiddle.net/c1xLqmdc/4/
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
order:4;
}
#box1,#box2,#box3,#box4{
width:100%;
}
Desktop:
https://jsfiddle.net/c1xLqmdc/
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
order:4;
}
/*#box1,#box2,#box3,#box4{
width:100%;
}*/
So I tried switching to columns to fix the gap, and now it works perfectly for desktop but they are in the wrong order for mobile.
HTML:
<div id="box-container">
<div id="box-column-left">
<div id="box1"></div>
<div id="box3"></div>
</div>
<div id="box-column-right">
<div id="box2"></div>
<div id="box4"></div>
</div>
</div>
Mobile:
https://jsfiddle.net/ar90Ly20/2/
CSS:
#box-container{
display:flex;
flex-flow:row wrap;
}
#box-column-left{
width:100%;
}
#box-column-right{
width:100%;
}
#box1{
background-color:cyan;
width:100%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:100%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:100%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:100%;
height:150px;
order:4;
}
Desktop:
https://jsfiddle.net/ar90Ly20/
CSS:
#box-container{
display:flex;
flex-flow:row wrap;
}
#box-column-left{
width:50%;
}
#box-column-right{
width:50%;
}
#box1{
background-color:cyan;
width:100%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:100%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:100%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:100%;
height:150px;
order:4;
}
Is this possible to accomplish the first mobile example, and the second desktop example without changing the HTML?

Answer 1

The simple solution would be to just offset the top margin for box 4.
FIDDLE
HTML:
<div id="box-container">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</div>
CSS:
#box-container{
display:flex;
flex-flow: wrap;
}
#box1{
background-color:cyan;
width:50%;
height:200px;
order:1
}
#box2{
background-color:magenta;
width:50%;
height:150px;
order:2;
}
#box3{
background-color:yellow;
width:50%;
height:100px;
order:3;
}
#box4{
background-color:black;
width:50%;
height:150px;
margin-top: -50px;
order:4;
}
#media screen and (max-width: 425px) {
#box-container{
flex-flow: row wrap;
}
#box4{
margin-top: 0px;
}
#box1,#box2,#box3,#box4{
width:100%;
}
}