Switch column count in a row in Bootstrap and Foundation
{# BOOTSTRAP #}
{# clearfix every two columns on small screens #}
{% if loop.index is even %}
<div class="clearfix visible-sm"></div>
{% endif %}
{# clearfix every 3 columns on medium+ screens #}
{% if loop.index % 3 == '0' %}
<div class="clearfix hidden-sm"></div>
{% endif %}
{# FOUNDATION #}
{# clearfix every two columns on small-medium screens #}
{% if loop.index is even %}
<div class="clearfix hide-for-large"></div>
{% endif %}
{# clearfix every 3 columns on large+ screens #}
{% if loop.index % 3 == '0' %}
<div class="clearfix show-for-large"></div>
{% endif %}
{# Look up Bootstrap & Foundation visibility classes for more classes. (Make sure you're looking at the correct documentation for the verison of Foundation you're using.) #}