I currently have a page which is comprised of boxes of content, laid out such that there are two floated columns of inequal width, and each box with a varying height that fits its content, something like this:
.box {
padding: 1em;
border: 1px solid black;
margin: 3px;
}
.left.col {
float: left;
width: 70%;
}
.right.col {
float: right;
width: 30%;
}
.b1 {
background-color: red;
height: 150px;
}
.b2 {
background-color: green;
height: 80px;
}
.b3 {
background-color: blue;
height: 80px;
}
.b4 {
background-color: yellow;
height: 40px;
}
.b5 {
background-color: purple;
height: 30px;
}
.b6 {
background-color: cyan;
height: 40px;
}
.b7 {
background-color: orange;
height: 40px;
}<div class="boxes">
<div class="left col">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
</div>
<div class="right col">
<div class="box b4">4</div>
<div class="box b5">5</div>
<div class="box b6">6</div>
<div class="box b7">7</div>
</div>
</div>I'd like to be able to responsively collapse that layout on smaller screens into a single column but in such a way that I am able to control the ordering of the content boxes.
For that I'm happy to use the flexbox order with an appropriate polyfill for unsupported browsers such as flexibility.
Something like this:
/* @media screen and (max-width: 570px) */
.boxes {
display: flex;
flex-direction: column;
}
.box {
padding: 1em;
border: 1px solid black;
margin: 3px;
}
.b1 {
background-color: red;
height: 150px;
order: 1
}
.b2 {
background-color: green;
height: 80px;
order: 3
}
.b3 {
background-color: blue;
height: 80px;
order: 5
}
.b4 {
background-color: yellow;
height: 40px;
order: 2;
}
.b5 {
background-color: purple;
height: 30px;
order: 4
}
.b6 {
background-color: cyan;
height: 40px;
order: 6
}
.b7 {
background-color: orange;
height: 40px;
order: 7
}<div class="boxes">
<div class="box b1">1</div>
<div class="box b2">2</div>
<div class="box b3">3</div>
<div class="box b4">4</div>
<div class="box b5">5</div>
<div class="box b6">6</div>
<div class="box b7">7</div>
</div>What I haven't managed to do so far is achieve this as a single, responsive approach. I think I'd need to get rid of the <div class="col"> in order to control the box order with flex, but can't seem to achieve the same 2 column layout with flexbox and without float.
Is there a single (CSS) solution where both layouts can be achieved and switched responsively?
Edit
Both IE9 and Android 4.x account for around 2% each of my current audience of the past year, so I still need to support them. Therefore any solution using modern CSS techniques (e.g. Flexbox, CSS grid) needs to be backed up with a polyfill or gracefully fallback/degrade.
