Recently I found a question on StackOverflow that seemed very interesting: How to make HTML elements "zig zag" this way:
-----------------
|A > B > C > D > E|
|J < I < H < G < F|
-----------------
---
|A H|
|B G|
|C F|
|D E|
---
I was able to implement a simple solution for this problem with Flexbox and a bit of JavaScript (works for any even number of elements):
var reverseBoxes = function () {
var flexItems = document.querySelectorAll(".child"),
flexItemsCount = flexItems.length,
reverseAt = flexItems.length / 2,
breakPoint = 480;
for (var i = reverseAt; i < flexItemsCount; i++) {
flexItems[i].style.order = flexItemsCount - i;
}
for (var j = 0; j < flexItemsCount; j++) {
if (window.innerWidth > breakPoint) {
flexItems[j].style.width = (100 / flexItemsCount) * 2 - 2 + "%";
flexItems[j].style.height = "auto";
} else {
flexItems[j].style.height = (100 / flexItemsCount) * 2 - 2 + "%";
flexItems[j].style.width = "auto";
}
}
}
reverseBoxes();
window.addEventListener("resize", reverseBoxes);body {
font-family: Arial, sans-serif;
font-size: 18px;
margin: 0;
padding: 0;
}
.parent {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
height: 100vh;
}
.child {
margin: 1%;
text-align: center;
background: #069;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 480px) {
.parent {
flex-direction: column;
}
.child {
width: 48%;
}
}<div class="parent">
<div class="child">A</div>
<div class="child">B</div>
<div class="child">C</div>
<div class="child">D</div>
<div class="child">E</div>
<div class="child">F</div>
<div class="child">G</div>
<div class="child">H</div>
<div class="child">I</div>
<div class="child">J</div>
</div>