Cześć otrzymałem zadanie, z którym mam delikatne problemy "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. "
Oto kod:
<div className={styles.root}>
<div className='container'>
<div className='row align-items-center d-xs-inline-flex '>
<div className={'col-sm-6 order-sm-2'}>
<ProductSearch />
</div>
<div className={'col-sm-6 ' + 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>
W momencie ustawienia `order-sm-2 dla ProductSearch` oraz `order-sm-1 dla drugiej kolumny` wszystko się sypie. Podobnie jest, gdy próbuję ustawić dropmenu dla menu. Proszę o podpowiedź.