A common approach with footers is to have 4 columns that contain segmented lists of links (product info, company info, etc.), logos, etc.
You can still keep your four-column footer, but you'll want to make sure that it is responsive, automatically shifting columns for smaller screens.
The overall goal is to have 4 columns on large grids (large screens), 2 columns on medium grids (like tablets), and 1 column on small grids (typically phones).
To handle this, create nested grids- an outer grid comprised of two "medium-6" columns and, within each of those columns, two "large-6" columns. This will automatically split the outer columns into four total columns for large grids and down to one column for small grids.
The structure looks like this:
<div class="row">
<div class="medium-6 columns">
<div class="row">
<div class="large-6 columns">
Column 1 Content Here
</div>
<div class="large-6 columns">
Column 2 Content Here
</div>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="large-6 columns">
Column 3 Content Here
</div>
<div class="large-6 columns">
Column 4 Content Here
</div>
</div>
</div>
</div>
Remember that we use Foundation's grid framework, so the code you see above reflects Foundation's CSS classes.