Prevent "display:flex" from causing mobile menu to open on page load?

Question

I wanted to take the element at the bottom of our mobile menu (the far right on desktop) and add it to the top of the mobile menu list. To do this, I added the following CSS:

ul.et_mobile_menu {
    display:flex;
    flex-direction: column;
}

ul.et_mobile_menu li:last-child {
    order: -1;
    margin-bottom:5px;
}

This worked successfully, but (I believe cause by display:flex) the menu began to appear open on page load. I tried to simply hide it (until user clicks to open) with:

#mobile_menu, .et_mobile_menu{
    display:none;
}

But this prevented the earlier code from working. Does anyone have any ideas how to resolve this? Menu code below

<div id="et_mobile_nav_menu"><div class="mobile_nav closed">
<span class="select_page">Select Page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span><ul id="mobile_menu" class="et_mobile_menu" style="display: none;"><li id="menu-item-131" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item menu-item-has-children menu-item-131 et_first_mobile_item"><a href="https://heriotbayinn.com/" aria-current="page">About</a><ul class="sub-menu">
<li id="menu-item-29232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29232"><a href="/homepage/#history">History</a></li>
<li id="menu-item-26779" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26779"><a href="https://heriotbayinn.com/gallery/">Gallery</a></li>
<li id="menu-item-28534" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28534"><a href="https://heriotbayinn.com/educational-tourism/">Discover Quadra</a></li>
<li id="menu-item-27072" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27072"><a href="https://heriotbayinn.com/covid-update/">Covid-19 Update</a></li>
<li id="menu-item-29238" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29238"><a href="/homepage/#newsletter">Newsletter</a></li></ul>
</li>
<li id="menu-item-26496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26496"><a href="https://heriotbayinn.com/accommodations-heriot-bay/">Stay with Us</a><ul class="sub-menu">
<li id="menu-item-29261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29261"><a href="https://heriotbayinn.com/rooms-accommodation/">Rooms</a></li>
<li id="menu-item-29393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29393"><a href="https://heriotbayinn.com/cabins/">Cabins</a></li>
<li id="menu-item-29424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29424"><a href="https://heriotbayinn.com/suite/">Suite</a></li>
<li id="menu-item-29448" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29448"><a href="https://heriotbayinn.com/rent-whole-hotel/">Rent the Whole Hotel</a></li></ul>
</li>
<li id="menu-item-29497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29497"><a href="https://heriotbayinn.com/dining-at-heriot-bay-inn/">Dining</a><ul class="sub-menu">
<li id="menu-item-29498" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29498"><a href="https://heriotbayinn.com/dining-at-heriot-bay-inn/">Herons Restaurant</a></li>
<li id="menu-item-29515" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29515"><a href="https://heriotbayinn.com/hbi-pub-at-heriot-bay-inn/">HBI Pub</a></li></ul>
</li>
<li id="menu-item-31582" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31582"><a href="https://heriotbayinn.com/upcoming-events/">Events</a><ul class="sub-menu">
<li id="menu-item-232910" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232910"><a href="https://heriotbayinn.com/upcoming-events/">Upcoming Events</a></li>
<li id="menu-item-231975" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231975"><a href="https://heriotbayinn.com/past-events/">Past Events</a></li></ul>
</li>
<li id="menu-item-27658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27658"><a href="https://heriotbayinn.com/marina-heriot-bay-inn/">Marina</a></li>
<li id="menu-item-29206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29206"><a href="https://heriotbayinn.com/campground/">Campground</a></li>
<li id="menu-item-29747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29747"><a href="https://heriotbayinn.com/weddings/">Weddings</a><ul class="sub-menu">
<li id="menu-item-332203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-332203"><a href="https://heriotbayinn.com/weddings/">Weddings</a></li>
<li id="menu-item-29752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29752"><a href="https://heriotbayinn.com/meetings-retreats/">Meetings &amp; Retreats</a></li></ul>
</li>
<li id="menu-item-231735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-231735"><a href="https://heriotbayinn.com/shop-hbi/">Shop</a></li>
<li id="menu-item-26550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26550"><a href="https://heriotbayinn.com/contact/">Contact</a><ul class="sub-menu">
<li id="menu-item-28778" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28778"><a href="https://heriotbayinn.com/invest/">Invest</a></li></ul>
</li>
<li id="menu-item-29225" class="ds-custom-link menu-item menu-item-type-custom menu-item-object-custom menu-item-29225"><a href="https://onressystems.com/reservations/?property=heriot-bay-inn">Reserve Now</a></li></ul></div></div>

Answer 1

Resolved by using Javascript to move around the elements instead of CSS ordering on the flex display. Removed CSS.

<script>
    window.addEventListener("load", function () {
  // do things after the DOM loads fully
    var ul    = document.getElementById("mobile_menu");
    var reserve = ul.children[ul.children.length - 1];
    ul.removeChild(reserve);
    ul.prepend(reserve);
    reserve.classList.add("reserveSpacing");
    
    });
</script>