kisabelle
5/26/2017 - 5:42 PM

Switch column count in a row in Bootstrap and Foundation

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.) #}