How to print 2 columns of pictures from a list in asp.net mvc3 - asp.net-mvc-3

Question

I have this code and I am a bit in doubt how to make it print 2 rows instead of just 1 (Later I want it to be dynamic depending on screensize if possible, but for now it should just be 2 columns)
http://pastebin.com/H7CpBWWN
#model IEnumerable<FirstWeb.Models.Picture>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Title
</th>
<th>
Path
</th>
<th>
ConcertYear
</th>
<th>
Title
</th>
<th>
Path
</th>
<th>
ConcertYear
</th>
</tr>
#bool even = false;
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => item.Path)><img src=#Html.DisplayFor(modelItem => item.Path) width="250px" /> </a>
</td>
<td>
#Html.DisplayFor(modelItem => item.ConcertYear)
</td>
</tr>
}
</table>
So I want the boolean to be the switch between left and right column

Answer 1

I don't know how you can do it with your boolean flag for left or right, but if you are just after two columns, you could do something like this (apologies for typos/syntax errors, but you get the idea).
#for (int i = 0; i < Model.ContactMethods.Count; i += 2)
{
<tr>
<td>
#Html.DisplayFor(modelItem => Model[i].Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => Model[i].Path)>
<img src=#Html.DisplayFor(modelItem => Model[i].Path) width="250px" />
</a>
</td>
<td>
#Html.DisplayFor(modelItem => Model[i].ConcertYear)
</td>
#if (Model.ContactMethods.Count > i + 1)
{
<td>
#Html.DisplayFor(modelItem => Model[i + 1].Title)
</td>
<td>
<a href=#Html.DisplayFor(modelItem => Model[i + 1].Path)>
<img src=#Html.DisplayFor(modelItem => Model[i + 1].Path) width="250px" />
</a>
</td>
<td>
#Html.DisplayFor(modelItem => Model[i + 1].ConcertYear)
</td>
}
else
{
<td colspan="3"></td>
}
</tr>
}
As far as dynamic columns, you'll need to look at jquery for that