How to iterate through collection across two columns in Meteor - meteor

Question

I'd like to have a two-column layout to display the returned collection information. Right now I have a two-column layout like:
<template name="Participants">
<div class="container">
<h4 style="text-align: center">{{ReportsMonth}} {{ReportsCamp}} {{ReportsYear}} {{ReportsTitle}}</h4>
{{#each programReports}}
<div class="row">
<div class="col s6">
<h5>Name: {{FullName}}</h5>
<p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
</div>
<div class="col s6">
<h5>Name: {{FullName}}</h5>
<p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
</div>
</div>
{{/each}}
</div>
</template>
The problem of course is that when it iterates through, it repeats the document across to the next column; it only gets to the next document when it finishes row. Is there a way to have it iterate to fill each div in each row with the next document?
Example:
Current HTML Output:
a a
b b
Desired:
a c
b d
Or:
a b
c d

Answer 1

Best way I can think of for the first example (vertical data rows, a c on same row):
Split your programReports into two helpers: one for the first half, one for the second half.
Make a row and a col s6 outside your #each loops.
Put your items in your each loops in a row and xs12.
I'd love it if someone had a better way to do this, as I've had to do it myself.
Horizontal data rows example (a b on same row):
I think for this one you simply need to get rid of the second col s6 in your each loop. I could be misunderstanding something though.