Grouping Bootstrap Cards

Question

Im trying to add a group onto some bootstrap cards so that a the cards are displaying the data first and then the relevant cards after, e.g:

22 March 2018

---

1st-Card 2nd-Card

23 March 2018

---

1st-Card

At the moment I have this, but this displays all of my cards on a row:

<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>

Is their anyway to group by date?

This is my PHP for each row:

<?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++;
    }?>

My actual query is just a simple SELECT statement:

SELECT * FROM APPOINTMENTS