PHPを使ってブートストラップの列を動的に形成

Question

3つのブートストラップ列にコンテンツを動的に表示したい。

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"> 
<content> 
</div> <---- Problem (should be placed at the very end of the column, 
but the same code should also fill 2nd and 3rd columns) 

私はmysqlにクエリをフェッチします。また、オブジェクトを左から右に降順に並べ替えるようにしたい（id = 51、id = 50、id = 42（オブジェクトタイトルの最後の数字はid）） row_numberとrow_number％3を使って、 = 0 row_number％3 = 1とrow_number％3 = 2で3列を表示しますが、3ブロックのhtml（悪い）と一緒に3つのクエリをデータベースに作成する必要があります。

SELECT * 
FROM (
    SELECT 
    @row_number:=@row_number + 1 AS rownum, id,title, description, ...etc 
    FROM (
     SELECT @row_number:=0) r, flats ORDER BY id DESC) ranked WHERE rownum%3=1 ORDER BY id DESC 

しかし、私はフィルタを実装するために始めたときではないすべての列は、私が表示したいオブジェクトを持っていましたが、私はすべての列のために独自のクエリを持っていたので、それは、オブジェクトを表示して問題を引き起こしました。 Problems with filters

私が望むもの：1つのMYSQLクエリを使用するために、コンテンツを持つ3つの別々の列を動的に作成します。 あなたのお手伝いを待っています！ 1 3の列の 例：

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"> 
<?php 
    $zapros = $DB_con->prepare('SELECT * 
FROM (
    SELECT 
    @row_number:=@row_number + 1 AS rownum, id,title, description,type, area,address, square, name, phone, email, price, avito, farpost 
    FROM (
     SELECT @row_number:=0) r, flats ORDER BY id DESC) ranked WHERE rownum%3=1 ORDER BY id DESC'); 
    $zapros->execute(); 
    $rowsone=$zapros->rowCount(); 
if($zapros->rowCount() > 0) 
    {$tmpCount = 1; 

    $count=$zapros->rowCount(); 
    while($data=$zapros->fetch(PDO::FETCH_ASSOC)) 
    { 
     extract($data); 


     $number=$data['id']; 
               $imagestm=$DB_con->prepare('SELECT file FROM flats_images WHERE post_id=:uid LIMIT 1'); 
               $imagestm->bindParam(':uid',$number); 
               $imagestm->execute(); 
               $imgrow=$imagestm->fetch(PDO::FETCH_ASSOC); 
               extract($imgrow);?> 

<div class="well-lg well-smallborders"> 
<a href="flat.php?flat_id=<?php echo $data['id']; ?>"> 
<img src="/mysql/uploads/<?php echo $imgrow['file']; ?>" class="img-responsive title-image center-block" /></a> 
<div class="flat-price center-block"><?php echo $data['price']; ?><span class="glyphicon glyphicon-rub" aria-hidden="true"></span> </div> 
<div class="flat-title"><?php echo $data['title'];?> <?php echo $data['id']; ?></div> 
<div class="dimmed-text left"><?php echo $data['type']; ?> </div> 
<div class="dimmed-text right"><div class="tooltip_my"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span><?php echo $data['area'];?> <span class="tooltiptext"><?php echo $data['address']; ?></span></div></div> 
<br> 
<div class="dimmed-text left"><div class="tooltip_my"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span><?php echo $data['phone'];?><span class="tooltiptext"><?php echo $data['name'];?></span></div></div> 
<div class="dimmed-text right"> <?php echo $data['square'];?></div> 
<table class="flats-table"> 
<tr> 
<td colspan="3"> 
    <button id="collapsar" class="btn btn-info pull-left" data-toggle="collapse" data-target="#hide-me<?php echo $tmpCount;?>"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> <span class="btntext">Показать миниатюры</span></button> 
    <a href="flat.php?flat_id=<?php echo $data['id']; ?>" class="btn btn-info pull-left" ><span class="glyphicon glyphicon-eye-open"></span> <span class="btntext">Подробнее ...</span></a> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="3"> 
<div id="hide-me<?php echo $tmpCount;?>" class="collapse"> 
<? 
$imagestm2=$DB_con->prepare('SELECT file FROM flats_images WHERE post_id=:uid'); 
               $imagestm2->bindParam(':uid',$number); 
               $imagestm2->execute(); 


for ($i = 1; $i <= $imagestm2->rowCount(); $i++) { 
    $imgrow2=$imagestm2->fetch(PDO::FETCH_ASSOC); 
               extract($imgrow2); ?> 

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4"> 
<div class="thumbnail"> <img src="mysql\uploads\<?php echo $imgrow2['file']; ?>" data-toggle="modal" data-target="#myModal" class="img-responsive"/></div> 
</div> 
    <? 

} ?> 
</div> 
    </td> 
    </tr> 
</table> 
</div><? 
$tmpCount++; 
     }}  
    ?> 
    </div> 

実際の結果は、私がしたい：Actual result

Answer 1

私はあなたが単に多分、あなたの結果を反復処理、出力の3列を生成し、その後もフィルタを適用しようとしていると思いますあなたの要素のいくつかを隠すJavascriptを通して。次のようにそれを行うには、私が知っている最も簡単な方法は次のとおりです。

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"></div> 
    ... 
    <!-- Bootstrap can manage with only 1 .row --> 
</div> 

Answer 2

私は私がやりたいこと、それは行うことは可能だとは思わない、代わりに私は、コンテンツを表示するにはもっと簡単な方法を見つけました：ちょうどに3列の団結1つのすべてのデータをそこに置きます。あなたはスポイラーを開くと問題がありますが、私はそれに対処すると思います。すべてのあなたの答えをありがとう。