Gallery not show the thumbnails in proper sequence

Currently I am working to integrate the template in ProcessWire CMS. Everything works well, but the order of the thumbails (portfolio) is not displayed properly. The first four items are good, but than the first in the 2nd row is showed as second and jumps al little.
Can anyone say what is going wrong in the code? I do not know anymore.

<div id="portfolio" class="portfolio grid-container clearfix">

							<?php $project= $pages->find("template=kennis-single");
									foreach($project as $s) {

							$out_project .= '<article class="portfolio-item  ';
												foreach ($s->Filter_Kennisbank as $f)
							$out_project .= ' '.$f->filter_class.' ';						
							$out_project .= '  ">';
							$out_project .= '	<div class="portfolio-image">';
							$out_project .= '		<a href="'.$s->url.'">';
												 $afbeelding = $s->Afbeelding->first();
												 $thumb_project = $afbeelding->size(500, 300);
												 $large_project = $afbeelding->size(800, 600);
							$out_project .= '			<img src="'.$thumb_project->url.'" alt="">';
							$out_project .= '		</a>';
							$out_project .= '	</div>';
							$out_project .= '	<div class="portfolio-desc">';
							$out_project .= '		<h3><a href="'.$s->url.'">'.$s->h1.'</a></h3>';
							
							$out_project .= '	</div>';
							$out_project .= '</article>';
								}
							echo $out_project;
							?>
							
							

						</div>

The website is http://dev.totaalschoorsteenspecialist.nl/kennisbank/

Thanks a lot.