How can I select an element which has moved bellow a block of elements

Good day, I am building a horizontal menu with several levelsAt the end (right side) I have a hidden hamburger.

Here is the demo

As you can see, actually, there is an hamburger drop down menu. It will be hidden, but I kept it displayed for the explication.

ScenarioIf you resize the windows to make it smaller (width), at some point, the li goes at the second line because of flex-wrap: wrap;

nav.e-panel-row ul{    display: flex;    flex-wrap: wrap;    flex-direction: row;    justify-content: space-between;    margin: 0 auto;    list-style: none;    box-sizing: border-box;    padding: 0px;}

I would like to know if I can marked the li which go at the second line.

My idea is, when one of more are not at the first line, jQuery move it to the hamburger

<li id="hamburger" class="hasChildren"><div><a href="#" class="dropdown-toggle" aria-expanded="false"><span class="fa fa-navicon"></span></a></div><ul class="sub-menu"><!-- the li of the second line must be append here</ul></li>

when, jquety detect a li between the ul.sub-menu

if($("#hamburger ul li").length >= 1){            console.log("hambuger contain frite");            $("#hamburger").show();        }        else        {            $("#hamburger").hide();        }

the hamburger is display at the first line.

I can change my html code, to have two nav. One for the menu, and one for the hamburger, to make sure that the hamburger stay at first left, at right side.

My worries is how to detect a li, on the second line, as the container nav.e-panel-row ulremind the same.

Should I check the y position of the element, and when is bellow the first li, I move it?

What would be your recommendation?