How to divide grid equally in foundation - twitter-bootstrap-3

Question

I have a footer where in section, I need it to be seperated into 4 parts. 2 up and 2 down. How to do this? I have attached the code. I have attached the image on how i wanted it.
Click to see Image
<div className="footer">
<div className="row full-width">
<div className="large-6 columns">
<div className="row">
<div className="small-12 medium-3 large-4 columns">
<img className="" src="" alt="logo"/>
<div className="contact-info">
<p className="address">address</p>
<p className="email">mail</p>
<p className="tele">53343</p>
</div>
</div>
<div className="small-6 medium-3 large-8 columns">
<div className="row">
<ul className="list-unstyled ">
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Fast Shipping</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Free Return</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Price Gurantee </p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Online Support</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="large-6 columns">
<div className="row">
</div>
</div>
</div>
</div>
Thanks

Answer 1

you should remove all the className properties from your elements and just use class. as noted in the Docs, the grid of foundation works with <div class=""> elements so you're code messes up things a bit.
read more here: http://foundation.zurb.com/sites/docs/grid.html#basics
and a scheme of the footer would be like:
<div class="row footer">
<div class="small-6 columns">
<img src="...">
<p>some text</p>
</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div><!-- end of row -->