Группирование бутстрап-карт

Я пытаюсь добавить группу на некоторые карты начальной загрузки, чтобы карты сначала отображали данные, а затем соответствующие карты, например:

22 марта 2018 г.

23 марта 2018 г.

На данный момент у меня есть это, но здесь отображаются все мои карты подряд:

<div class = "card">
<div class = "card-body">
<div class = "card-header"><i class = "material-icons floatleft">today</i><div floatleft>'.date("d/m/Y", strtotime($row['Date'])).'</div></div>
<h5 class = "card-title">'.$row['Firstname'].' '.$row['Surname'].'</h5>
<p class = "card-text">'.$row['Notes'].'</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Added: '.date("d/m/Y", strtotime($row['timestamp'])).'</small>
</div>
</div>
</div>

Можно ли их как-нибудь сгруппировать по дате?

Это мой PHP для каждой строки:

<?php
    $no     = 1;
    $total  = 0;
    while ($row = mysqli_fetch_array($tablequery))
    {
        $amount  = $row['LineRef'] == 0 ? '' : 
number_format($row['LineRef']);
        echo 
            '    <div class = "col-sm-3 OMHCardPadding">
                <div class = "card">
                    <div class = "card-body">
                    <div class = "card-header"><i class = "material-icons floatleft">today</i>
<div floatleft>'.date("d/m/Y", strtotime($row['Date'])).'</div></div>
<h5 class = "card-title OMHCardPadding">'.$row['Firstname'].' '.$row['Surname'].'</h5>
 <p class = "card-text OMHCardPadding">'.$row['Notes'].'</p> </div> <div class = "card-footer">
<small class = "text-muted">Added: '.date("d/m/Y",strtotime($row['timestamp'])).'</small>
                </div>
            </div>
            </div>

            ';
        $total += $row['LineRef'];
        $no++;
    }?>

Мой фактический запрос - это простой оператор SELECT:

SELECT * FROM APPOINTMENTS