Salve ragazzi!

Ho 6 banner affiancati in questo modo:

codice:
<div style="width:622px;">
<div style="float:left; width:76px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:103px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:97px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:90px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:136px;">Banner</div>
<div style="float:left; width:10px;">&nbsp;</div>
<div style="float:left; width:70px;">Banner</div>
</div>
Vorrei che quando ridimensiono la pagina, arrivo a 480px, quindi schermo mobile, i banner si mettessero uno sotto l'altro e al centro fra loro.

Come faccio? Stò impazzendo perché al ridimensionamento della pagina i banner rimangono in fila orizzontale sfondando il layout.