How to make sure that in case with sorting the elements, no one necessary one is not missed?

Question

The script task is to notify about the number of each brick that ends the line. Why does the script not always work correctly, for example, if the window is resized to a minimum, then possibly get the result:

Last brick on level: 3 brick2
Last brick on level: 51 brick3
Last brick on level: 147 brick5
Last brick on level: 195 brick6
Last brick on level: 243 brick7

Why is there no notification about brick number 4 or how to get after script finished array such as below for example when window resized to praticuly minimum?

  wall = {
      'level_0': ["Brick 1", "Brick 2"],
      'level_31': ["Brick 3", "Brick 4"],
      'level_62': ["Brick 5", "Brick 6"],
      'level_93': ["Brick 7", "Brick 8"]
    };

$(window).on('load', function() {

    const wall = document.querySelectorAll(".wall");
    function resort(wall) {
      for (const container of wall) {
        for (const child of container.children) {
          $("." + child.classList[0]).html(child.classList[0] + " " + child.offsetTop + " ");
          $("." + child.classList[0]).attr({"levelh": child.offsetTop});
        }
      }
    }

    window.addEventListener("DOMContentLoaded", e => {
      resort(wall);
    });

    window.addEventListener("resize", e => {
      resort(wall);

    });

    window.dispatchEvent(new Event('resize'));
    $level = "";
 
    $('li').each(function(index, value) {
      if ($level == "") {
        $level = $(this).attr('levelh');
      }
      if ($(this).next().attr('levelh') > $(this).attr('levelh')) {
     console.log("Last brick on level: " + $(this).attr('levelh') + " " + $(this).attr('class'));
      }
    }).promise().done(function () { 
});;
});

body {
  margin: 0;
  font-size: 23pt;
}

ul.wall {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  justify-content: center;
  list-style: none;

}

ul.wall [class*="brick"] {
  background-color: green;
  text-align: center;
  margin: 3px;
  padding: 3px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wall">
  <li class="brick1"> brick 1 </li>
  <li class="brick2"> brick 2 </li>
  <li class="brick3"> brick 3 </li>
  <li class="brick4"> brick 4 </li>
  <li class="brick5"> brick 5 </li>
  <li class="brick6"> brick 6 </li>
  <li class="brick7"> brick 7 </li>
  <li class="brick8"> brick 8 </li>
</ul>