列div移动到上面高度最大的列div下方

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: 33.33%;
  margin-bottom: 10px;
}

.column:nth-child(1) {
  background-color: #f1f1f1;
}

.column:nth-child(2) {
  background-color: #d3d3d3;
}

.column:nth-child(3) {
  background-color: #c1c1c1;
}

window.addEventListener('load', function() {
  var columns = document.querySelectorAll('.column');
  var maxHeight = 0;
  var tallestColumn;

  columns.forEach(function(column) {
    var height = column.offsetHeight;
    if (height > maxHeight) {
      maxHeight = height;
      tallestColumn = column;
    }
  });

  columns.forEach(function(column) {
    if (column !== tallestColumn) {
      column.style.order = tallestColumn.style.order + 1;
    }
  });
});