Как адаптировать меню под смартфон?

Мне нужно сделать адаптив меню.

<nav class="midleheader">
        <div class="container ">
            <div class="row ">
                <div class="contend col col-xs-6 " style="width: 230px; height: 100%;">
                    <a class="navbar-brand" href="#">
                        <img src="/media/imgonline-com-ua-Replace-color-tc87FXAM0b.jpg" alt=""  class="w-100">
                    </a>
                </div>
                <div class="col custom_phone">
                
                    <div class="phone "  >
                        <a class="phone_1 col " href="tel:#">+38 (099) 99 9999</a>
                     </div>
                    
                    </div>
                </div>
                <div class="cart col col-xs-12  ">
                    <a class="navbar-brand" href="#"> 
                    <span class="cartname">Корзина</span><br>
                    <span class="whatinside">Корзина пуста</span>   
                    </a>
                </div>
            
            </div>
        </div>
    </nav>