Динамически формировать столбцы в bootsrap с помощью php

я хочу динамически отображать содержимое в 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 запроса к базе данных вместе с 3 блоками html(что плохо).

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

Но, когда я начал реализовывать фильтры, это вызвало проблемы с отображением объектов, потому что не каждый столбец имел объект, который я хотел отобразить, но у меня был собственный запрос для каждого столбца.
Проблемы с фильтрами

Что я хочу: динамически сформировать 3 отдельных столбца с содержимым, чтобы использовать один запрос MYSQL.
Ждем вашей помощи!
Пример 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="mysqluploads<?php echo $imgrow2['file']; ?>" data-toggle="modal" data-target="#myModal"  class="img-responsive"/></div>
</div>
    <?

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

Фактический результат я хочу: фактический результат

2 ответа

  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>
    
  2. Я не думаю, что это возможно сделать, то, что я хотел сделать, вместо этого я нашел гораздо более простой способ отображения контента: просто объедините 3 столбца в один и поместите все данные там. Да, у него есть проблемы, когда вы открываете спойлер, но я думаю, что справлюсь с этим. Спасибо за все ваши ответы.