Zig-zag child element with Flexbox and JavaScript
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