views – How can I add classes to rows depending on the loop index?

I have received a design where they want to have the latest three articles links put on the top of the front page (over their respective images) so that the first is taking left half of the page and second and third to split (vertically) the right half top.

I thought that view-view–latest-articles.html.twig would solve the problem elegantly like this:

<div class="row">
{% for row in rows %}       
    {% if loop.index == 1 %}
      <div class="col-6">
          {{ row }}
      </div>
    {% elseif loop.index==2 %}
    ...   // dull and inelegant code dismissed
    {% endif %}
{% endfor %}

But if I put debugging code for loop.index into the code it only shows the index once and splurts out all the rows after it, never minding my if. It still shows the index once, so I know it IS using the template.

Am I missing something or trying just to it in a wrong way?