Div con diseño adaptable

[mblascog]

Buenas,
Tengo una barra como pie de la web, con esta estructura:



Con media queries reduzco el tamaño de la fuente, pero llega un momento, que la fuente es demasio pequeña, entonces:
- quiero que salte la capa de la derecha a la parte inferior izquierda
- vuelvo a aumentar el tamaño de la fuenta



Y así sucessivamente:


En las propiedades de cada capa, tengo float:left y el width:xx%

Pero no consigo el efecto que busco.
Alguien me podría orientar? Gracias

[Rafael]

1) No cambies el tamaño de la fuente indiscriminadamente. El tamaño de la fuente es para que la gente pueda leer, no para que quepa en el ancho.

2) Prueba una combinación de width con min-width.

Por ejemplo
min-width: 300px;

3) Explora la posibilidad de usar flexbox en lugar de float: https://www.google.com.mx/search?q=flexbox

[mblascog]

Gracias, he mirado flex, está muy bien, pero aún no es compatible con todos los navegadores. Prefiero seguir con los div, tiene que ser posible.

Gracias

[Rafael]

Flex es suficientemente compatible con todos los navegadores ya: http://caniuse.com/#feat=flexbox

Y ojo. Una cosa es Flex y otra cosa es un div. El div lo puedes seguir usando, el Flex es una propiedad que le das a ese div.

Y Ojo 2... ¿Por qué necesitas un div? En tu caso aplica los estilos directamente al <a>

Y Ojo 3... Mi primer comentario es:

2) Prueba una combinación de width con min-width.