My layout resembles a table using flexbox:
+--------------+---------------+-----------------+---------------+
| 1 | 2 | 3 | 4 |
| | | | |
+--------------+---------------+-----------------+---------------+
When the page size decreases, I want the content to wrap like this:
+--------------+-------------------------------------------------+
| | 2 |
| | |
| +-------------------------------------------------+
| 1 | 3 |
| | |
| +-------------------------------------------------+
| | 4 |
| | |
+--------------+-------------------------------------------------+
I attempted using flex-wrap: wrap and adjusting children widths, but it resulted in:
+-----------+--------------------------------------+
| | 2 |
| | |
| 1 +--------------------------------------+
| |
| |
+-----------+--------------------------------------+
| 3 |
| |
+--------------------------------------------------+
| 4 |
| |
+--------------------------------------------------+
This is my current code snippet:
.container {
display: flex;
flex-wrap: wrap;
}
.controls {
flex: 0 0 25%;
max-width: 25%;
}
.name, .artist, .album {
flex: 0 0 75%;
max-width: 75%;
}
@media screen and (min-width: 600px) {
.name, .artist, .album {
flex: 0 0 25%;
max-width: 25%;
}
}<div class="container">
<div class="controls">PLAY</div>
<div class="name">NAME</div>
<div class="artist">ARTIST</div>
<div class="album">ALBUM</div>
</div>(JSFiddle)
I'm seeking a pure CSS solution compatible with IE11+.