Булма: пытается сделать navbar с двумя строками, где в мобильном поисковый ввод из первого ряда перемещается во второй ряд

Question

Я пытаюсь сделать navbar с двумя рядами: первый ряд для вторичного меню, второй ряд для основного меню. Я довольно новичок в Bulma и ищу решение не так просто, как Bootstrap.

Вот моя скрипка (структура HTML).

https://jsfiddle.net/wck1hj9r/4/

<div class="navbar nav-secondary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
            Part of Larger Holding
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">

    </div>

    <div class="navbar-end">
      <a class="navbar-item">
              Menu 1
            </a>
      <a class="navbar-item">
              Menu 2
            </a>

      <div class="navbar-item field">
         <p class="control has-icons-right">
           <input class="input" type="search" placeholder="Search...">
                     <span class="icon is-small is-right">
                     </span>
         </p>
      </div>
    </div>
  </div>
</div> <!-- nav -->

<nav class="navbar nav-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">

    </div>

    <div class="navbar-end">
      <a class="navbar-item">
              About
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
                Team
              </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
                  Management
                    </a>
          <a class="navbar-item">
                  Experts
                    </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
                  Apply!
                    </a>
        </div>
      </div>

      <a class="navbar-item">
              Articles
            </a>

    </div>
  </div>
</nav>

Как видно, мое решение до сих пор состоит в создании двух навигационных панелей Bulma.

Тогда я хочу, чтобы макет мобильного телефона выглядел примерно так. Ввод поиска скрыт, и во втором ряду появляется значок поиска. Ссылки во втором ряду скрыты, и вместо этого появляется меню бургера. Между тем ссылки в первом ряду остаются видимыми.

Мой вопрос, возможно, двоякий:

• Я не уверен с этой структурой HTML, так как она кажется избыточной? Как бы я лучше структурировать это?
• В соответствии со структурой, как мне сделать так, чтобы мобильный макет отображался, как я объяснил?

Какие-нибудь рекомендации, как это сделать?