Displaying channels & respective fields in responsive grid

Hi all,

Trying to get a grasp on this CMS and I’ve been reading the following article, http://ellislab.com/expressionengine/user-guide/how_to/building_a_simple_news_site.html#putting-it-all-together

<ul>
        {exp:channel:entries channel="news" limit="10"}
                <li>{title}</li>
        {/exp:channel:entries}
</ul>

I’m building on top of Foundation 4 by Zurb with the following being used for the grid

<div class="row">
<div class="large-6 columns">
Example Content Left
</div>
<div class="large-6 columns">
Example Content Right
</div>
</div>

I’m trying to wrap my head around how I would display the content in to only show three columns, looping to the limited amount entries I specify beneath each respective row. Would I need to call new entries and change the order by for each row?

I hope this makes sense, thanks in advance!