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;

  for (var i = reverseAt; i < flexItemsCount; i++) {
    flexItems[i].style.order = flexItemsCount - i;
    if (window.innerWidth > breakPoint) {
      // 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 {
      // 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";
    }
  }
}
 
reverseBoxes();
window.addEventListener("resize", reverseBoxes);

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 > breakPoint) {
        for (var i = reverseAt; i < 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 < 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