Zmiana kolejności sekcji na stronie css

Question

Witam, mam za zadanie zmienić kolejność wyświetlania „wyszukiwarki” i menu. Na tabletach wyszukiwanie ma być pod menu, a na mniejszych ekranach ma być wyszukiwanie i obok niego ikona mobilnego menu, które po rozwinięciu ma pokazywać dropdown przykrywający treść strony. Wykorzystuje bootstrap

Oto kod menu:

  <div className={styles.root}>
    <div className='container'>
      <div className='row align-items-center '>
        <div className='col-'>
          <ProductSearch />
        </div>
        <div className={'col-auto ' + styles.menu}>
          <ul>
            <li>
              <a href='#' className={styles.active}>
                Home
              </a>
            </li>
            <li>
              <a href='#'>Furniture</a>
            </li>
            <li>
              <a href='#'>Chair</a>
            </li>
            <li>
              <a href='#'>Table</a>
            </li>
            <li>
              <a href='#'>Sofa</a>
            </li>
            <li>
              <a href='#'>Bedroom</a>
            </li>
            <li>
              <a href='#'>Blog</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>