Html 如何切换多个右浮动元素的顺序？

我在网站的导航栏上添加了一个汉堡菜单按钮，用于较小的屏幕。按钮向右浮动。然而，我也希望我的黑暗模式按钮浮动到汉堡菜单的右边，但在左边

现在的

渴望的

HTML

<header class="header">
    <a href="index.html" class="logo">My Logo</a>
    <a href="../dark/index.html"><img src="images/moon.png" id="styleSwitch"></a>
    <nav role="navigation">
        <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
        <ul class="menu">
            <li><a href="page.html">page</a></li>
            <li><a href="page.html">page</a></li>
            <li><a href="page.html">page</a></li>
            <li><a href="page.html">page</a></li>
        </ul>
    </nav>
</header>

    @media (max-width:1024px) {

      nav {
        min-height: 3.5rem;
      }

        a {
            outline: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        a:active {
            color: black;
        }

        a:hover {
            background: unset;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
            cursor: auto;
            transition: unset;
        }

      h1 {
        font-size: 40px;
      }

      h4, h3 {
        font-size: 25px;
      }

      footer {
        line-height: 1.8em;
      }

        .container {
            width:97%;
            max-width: 90%;
        }

      #styleSwitch {
        float: right;
      }

      #banner {
        font-size: 1.5rem;
        padding-left: .8rem;
        text-align: left;
      }
}

    @media (min-width:900px) {
      .header li {
        float: left;
      }
      .header li a {
        padding: 15px 30px;
      }
      .header .menu {
        clear: none;
        float: right;
        max-height: none;
      }
      .header .menu-icon {
        display: none;
      }
}