Zig-zag child element with Flexbox and JavaScript Recently I found a question on StackOverflow that seemed very interesting: How to make HTML elements "zig zag" this way:

 -----------------
|A &gt; B &gt; C &gt; D &gt; E|
|J &lt; I &lt; H &lt; G &lt; 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 &lt; flexItemsCount; i++) {
    flexItems[i].style.order = flexItemsCount - i;
  }

  for (var j = 0; j &lt; flexItemsCount; j++) {
    if (window.innerWidth &gt; 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%;
  }
}
&lt;div class="parent"&gt;
  &lt;div class="child"&gt;A&lt;/div&gt;
  &lt;div class="child"&gt;B&lt;/div&gt;
  &lt;div class="child"&gt;C&lt;/div&gt;
  &lt;div class="child"&gt;D&lt;/div&gt;
  &lt;div class="child"&gt;E&lt;/div&gt;
  &lt;div class="child"&gt;F&lt;/div&gt;
  &lt;div class="child"&gt;G&lt;/div&gt;
  &lt;div class="child"&gt;H&lt;/div&gt;
  &lt;div class="child"&gt;I&lt;/div&gt;
  &lt;div class="child"&gt;J&lt;/div&gt;
&lt;/div&gt;
Tiny adjustment : you can update all your objects in your first loop and get rid of the second.

var reverseBoxes = function() {

    var flexItems = document.querySelectorAll(".child"),
        flexItemsCount = flexItems.length,
        reverseAt = flexItems.length / 2,
        breakPoint = 480;

    if (window.innerWidth &gt; breakPoint) {
        for (var i = reverseAt; i &lt; flexItemsCount; i++) {
            flexItems[i].style.order = flexItemsCount - i;
            // First half of items
            flexItems[flexItemsCount - i - 1].style.width = (100 / flexItemsCount) * 2 - 2 + "%";
            flexItems[flexItemsCount - i - 1].style.height = "auto";
            // Second half of items
            flexItems[i].style.width = (100 / flexItemsCount) * 2 - 2 + "%";
            flexItems[i].style.height = "auto";
        }
    } else {
        for (var i = reverseAt; i &lt; flexItemsCount; i++) {
            flexItems[i].style.order = flexItemsCount - i;
            // First half of items
            flexItems[flexItemsCount - i - 1].style.height = (100 / flexItemsCount) * 2 - 2 + "%";
            flexItems[flexItemsCount - i - 1].style.width = "auto";
            // Second half of items
            flexItems[i].style.height = (100 / flexItemsCount) * 2 - 2 + "%";
            flexItems[i].style.width = "auto";
        }
    }
}


Edit : got the if out of the for loop