การจัดรูปแบบเนื้อหาจากรูปสินค้าแล้วจัดตัวหนังสือต้องทำอย่างไหรครับ

<div class="row column text-center">
 <h2 class="style42">สินค้าขายดี</h2>
<hr>
</div>
<div class="row small-up-2 large-up-4">

<?php 
/*SELECT size_list_id, COUNT(*) AS total
            FROM tb_order_detail
            GROUP BY size_list_id
            ORDER BY COUNT(*) DESC
*/

    $pdo = Database::connect();
    $sql = 'SELECT*, COUNT(*) as `recom` FROM `tb_order_detail`,`tb_product`,`tb_size` WHERE `tb_order_detail`.`size_list_id` = `tb_size`.`size_list_id` AND `tb_size`.`product_id` = `tb_product`.`id` GROUP BY `tb_order_detail`.`size_list_id` ORDER BY `recom` DESC LIMIT 4';
    foreach ($pdo->query($sql) as $row5) {
      //echo $row['size_list_id'];
     // echo $row['recom'];
	$name=mb_substr($row5['product_name'],0,100, "utf-8");
      echo '<div class="column">';
      echo '<div class="media-object">';
      echo '<div class="media-object-section">';
      echo '<a href="product.php?id='.$row5['id'].'" ><img height="250px" width="250px" class="thumbnail" src="img_product/'.$row5['image'].'" > </a>';
      echo '</div>';
      echo '<div class="media-object-section">';
      echo '<h5 class="head-detail">'.$name.'...</h5>';
      echo '<p>ราคา '.$row5['price'].' บาท</p>';
      echo '</div>';
      echo '</div>';
      echo '</div>';


      }

    Database::disconnect();
?>
<!--<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>

<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>

<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
</div>
<div class="media-object">
<div class="media-object-section">
<img class="thumbnail" src="img/100.jpg">
</div>
<div class="media-object-section">
<h5>ชื่อสินค้า</h5>
<p>รายละเอียดสินค้า</p>
</div>
--></div>

</div>
</div>