Hacer este menu responsive

[alexkurban]

Estoy viendo que es imposible porque el menu de abajo no va a responder, tengo oculta la parte de arriba y el menu con display= none

Código HTML:

<div class="container12"[U] id="menu"[/U]>
            <div class="row">
                <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
                <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
                <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
                <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
            </div><!-- row-->

            <div class="row" style="margin-bottom: 0;" class="nav">
                <div class="column10" id="nav">
                    <nav>
                        <ul>
                            <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                            <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                            <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                            <li><a href="#notebooks">НОУТБУКИ</a></li>
                            <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
            </div>    
        </div><!-- container--> 

Código HTML:

@media only screen and (max-width: 400px) {
    body{
        padding-top: 100px;
    }

    #menu{
      [U]  display: none;[/U]
    }

    #tipos{
        display: none;
    }
}

y lo que he hecho a sido crear 2 lineas mas en las que tiene que estar la parte de arriba en azul y la parte de abajo en blanco con el icono de ajustes y el menu a la derecha.
este;
http://prntscr.com/7uzb7r


como lo puedo hacer, duplicando el menu?