Making Photo Grid with Different size images - php

Question

Ok, may be its really simple. but, I can't figure it out how to do it. What I want is to query one table and show results in two divs on the page. What I mean is that I have some html like this:
<div class="row">
<div class="small">
//
</div>
<div class="large">
//
</div>
<div class="small">
//
</div>
<div class="small">
//
</div>
<div class="small">
//
</div>
<div class="large">
//
</div>
</div>
and the query like this
$stmt = $pdo->prepare("SELECT * FROM cars WHERE cars_cat = ? ORDER BY car_id DESC");
$stmt->execute(array($cat_id));
$data = $stmt->fetchAll();
foreach($data as $row) {
}
The database table is simple table with id, name, image, cars_cat.
UPDATE:
This is the structure of the gallery
<div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- First Column -->
<div class="small">
</div>
<div class="large">
</div>
<div class="small">
</div>
<div class="small">
</div>
</div> <!-- End First Column -->
<div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Second Column -->
<div class="small">
</div>
<div class="small">
</div>
<div class="large">
</div>
<div class="small">
</div>
</div> <!-- End Second Column -->
<div class="col-sm-4 col-md-4 col-lg-4 nopadding"> <!-- Third Column -->
<div class="large">
</div>
<div class="small">
</div>
<div class="large">
//
</div>
</div> <!-- End Third Column -->

Answer 1

Try this way
<style>
.row {
-webkit-column-width:400px;
-moz-column-width:400px;
column-width:400px;
-webkit-column-gap:5px;
-moz-column-gap:5px;
column-gap:5px;
}
.small-box{
display:inline-block;
margin:0 0 5px 0;
padding:10px;
color:white;
}
.img-responsive{
width:100%;
height:auto;
}
</style>
<div class="row">
<div class="small-box">
<img src="http://aneemals.com/wp-content/uploads/2013/04/photos-of-animals-that-know-what-love-is-3.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://www.softstuffcreations.com/refresh/data/zoom_image/1772-PandaBear_resized.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://images6.fanpop.com/image/photos/35600000/wild-animals-animals-of-the-world-35665506-800-533.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://nice-animals.com/wp-content/uploads/2013/10/facts-of-love-between-animals-08.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://www.kenya.com/wp-content/uploads/2013/03/Mt-Kenya-Animals.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://www.softstuffcreations.com/refresh/data/zoom_image/1772-PandaBear_resized.jpg" alt="img" class="img-responsive">
</div>
<div class="small-box">
<img src="http://fc09.deviantart.net/fs71/i/2012/364/4/3/animals___lion_9_by_moonsongstock-d5pr9za.jpg" alt="img" class="img-responsive">
</div>
</div>
Means basically what you need to update is to update code this way
<div class="row">
<?php
foreach($data as $row) {
echo '<div class="small-box"> your image </div>';
}
?>
</div>

Answer 2

<div class="row">
<?php
foreach($data as $row) {
if($row->div_type == 0){
echo '<div class="small"> your data </div>';
}else{
echo '<div class="large"> your data </div>';
}
}
?>
</div>