Cabecera responsive simple con css

Flexbox . La compatibilidad con exploradores hoy por hoy es buena , esta técnica se puede aplicar sin causar ningún caos dentro de los navegadores.
Este es el CSS, que sólo con un par de líneas logra hacer todo el trabajo y lo que hace es encontrar los lugares adecuados para cada una de las secciones.

<header>
  <div class="header-left"><span>Titulo</span>-ec</div>
    <div class="header-center">
        <ul>
            <li><a href="#>hola3</a></li>
            <li><a href="#">hola2</a></li>
            <li><a href="@">hola1</a></li>
        </ul>
    </div>
  <div class="header-right"><button>Registrarse </button></div>
</header>

css

header{
    /* Activamos flex. */
    display: flex;
    /* extendemos los elmentos dentro de la cabecera. */
    justify-content: space-between;
    /* Alineamos el contenido verticalmente dentro de la cabecera. */
    align-items: center;

    padding: 40px 100px;
    color: #fff;
    background-color: #ccebff;

}
@media (max-width: 1000px){
    header{
        /* revertimos la cabecera haciendola vertical. */
        flex-direction: column;
        /* alinemamos el contenido al comienzo (a la izquierda) de la cabecera. */
        align-items: flex-start;
    }
}

Para obtener más información sobre Flexbox y sus propiedades CSS utilizadas, echa un vistazo a los siguientes enlaces:

Una guía rápida para flexbox
justify-content
align-items
flex-direction