displays y problemas de posicionamiento con Foundation4

[nanotime]

Hmm para ser un poco breve y no alargarme, estoy configurando un footer responsivo y necesito hacer que los elementos se vean uno debajo del otro en bloques, lo logro pero de manera poco satisfactoria, hace a medias las cosas y no se, ya he probado varias formas y ninguna me sale.

El HTML del código viene siendo este:

Código HTML:

<div class="footer-container">
    <div class="row" id="footer">
        <div class="small-12 small-centered colums">
            
            <div class="small-3 colums footer">
                <ul class="icon-size">
                    <li><i class="icon-html5"></i></li>
                    <li><i class="icon-css3"></i></li>
                    <li><i class="icon-linux"></i></li>
                </ul>
            </div>
 
            <div class="small-3 colums footer">
                <a href="https://creativecommons.org/licenses/" target="_blank"><img class="creative" src="{{paths.theme}}img/cc-white.png"></a>                
            </div>
            
            <div class="small-4 colums footer">
                <ul class="icon-size">
                    <li><a href="#"><i class="icon-google-plus"></i></a></li>
                    <li><a href="#"><i class="icon-twitter"></i></a></li>
                    <li><a href="#"><i class="icon-envelope-alt"></i></a></li>
                </ul>
            </div>
            
        </div>  
    </div>
</div>
 

Nada del otro mundo, el problema es que, luego de hacer algunos ajustes al CSS no logro hacer que las disposiciones se vean como quiero que lo hagan. Esta es una imagen de como queda:



Hmm lo que quiero lograr es que los iconos se vean con el inline-block pero, todos sucesivamente, osea, los primeros tres icons en linea, luego abajo la imagen y luego los tres iconos abajo;

¿Cual es mi problema? Bien, que para lograr que todos se vean en sucesión, necesito arreglar varias cosas, la primera es que los divs que los contienen deben estar en "display: block" y luego los ul deben estar en inline-block ¿Correcto? Eso es lo que estoy haciendo y así se termina viendo, me doy cuenta de que los tamaños de las grids afectan mucho esto, pero mientras mas espacio les de a las grids de iconos, la imagen de CC se ve mas y mas pequeña y desproporcional, de todos modos les dejo el código scss (que realmente no tiene prácticamente diferencias de un CSS normal):

Código CSS:

#sidebar-nav{
    width: 300px;
    display: block;
    margin:  0 auto;
    position: static;
 
    li{
        display: inline-block;
    }
}
 
#footer{    
 
    div{
        &:nth-child(2){
            display: inline-block;
        }
 
        &:nth-child(3){
            display: block;
        }
 
        &:nth-child(4){
            display: inline-block;
        }   
    }   
    
    ul{
        display: inline-block !important;
    }
 
    .icon-size{
        font-size: $mid-icon;
    }
}
 

Si alguien se le ocurre alguna idea, así sea tonta, yo la pruebo

[pzin]

Uhmm... Yo creo que te estás liando con nth-child. Por ejemplo:

Código CSS:

#footer div:nth-child(4){
  display: inline-block;
}
 

Esto no afecta a ningún elemento, porque sencillamente no hay ningún cuarto hijo que sea div. Por ejemplo, en una estructura como esta:

Código HTML:

<footer>
  <div>
    <div>
      <div>
        <div>
        </div>
      </div>
    </div>
  </div>
</footer>
 

No puedes usar :nth-child(2), ni :nth-child(3), ni :nth-child(4). Porque todos son en realidad primeros hijos, luego todos son :nth-child(1) —o :first-child, o :nth-child(odd).

Supongo que un selector más acorde para que lo quieres hacer, sería algo como:

Código CSS:

#footer > div div {
  &:nth-child(1) {}
  &:nth-child(2) {}
  &:nth-child(3) {}
}
 

¿No? Pregunto porque ando medio despistado.