Change HTML and CSS per Matrix row I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:

&lt;!--- feature left --&gt;
&lt;section class="features-inner dark-bg-container"&gt;
    &lt;div class="row collapse small-uncollapse" &gt;
        &lt;div class="medium-5 small-12 columns end dark-bg" &gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="medium-5 medium-push-2 small-12 columns end dark-bg-icon" &gt;
            &lt;img src="img/image.svg" class="feature-image"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;!--- end of feature left --&gt;

&lt;!--- feature right --&gt;
&lt;section class="features-inner gold-bg-container"&gt;
    &lt;div class="row collapse small-uncollapse" &gt;
        &lt;div class="medium-5 medium-push-7 small-12 columns gold-bg" &gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="medium-5 medium-pull-5 small-12 columns end gold-bg-icon"&gt;
            &lt;img src="img/image.svg" class="feature-image"/&gt;
        &lt;/div&gt;  
    &lt;/div&gt;
&lt;/section&gt;
&lt;!--- end of feature right --&gt;


How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.

TIA.
When looping through Matrix rows, you can use {{ loop.index }} or {{ loop.index0 }} to see which row you're at.

With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:

{% for row in entry.matrixFieldHandle %}
    {% if loop.index is divisible by(2) %}
        &lt;p class="even"&gt;{{ row.text }}&lt;/p&gt;
    {% else %}
        &lt;p class="uneven"&gt;{{ row.text }}&lt;/p&gt;
    {% endif %}
{% endfor %}