Как сделать подходящую таблицу для мобильных телефонов с помощью Bootstrap4

Question

Я пытаюсь создать таблицу с <td>, которая появится прямо под <th> для мобильных телефонов.В настоящее время он имеет несколько <td> друг над другом, но между ними нет <td>.Пять <th> сложены вместе, а после этого пять <td> сложены вместе.Я хочу показать ниже заголовок данные в мобильных телефонах.Может кто-нибудь, пожалуйста, помогите?Ваш отзыв будет полезен.

translation.html

<table class="table table-hover table-bordered table-responsiveness">
                <thead class="thead-light">
                    <tr class="text-center">
                        <th scope="col">Venue</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Ticket Price</th>
                        <th scope="col">Hearing Loop</th>
                        <th scope="col">Total Price</th>
                    </tr>
                </thead>
                <tbody>
                    {% for ticket in tickets %}
                    <tr class="text-center">
                        <th scope="row">{{ticket.venue}}</th>
                            <td>{{ticket.quantity}}</td>
                            <td>$25.00 each</td>
                            <td>{{ticket.loop}}</td>
                            <td>${{ticket.total | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-right">Sales Tax</th>
                        <td class="text-center">${{ticket.tax | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <th colspan="4" class="text-right">Total</span></th>
                        <td class="text-center">${{ticket.total_price | floatformat:2}}</td>
                    </tr>
                    <tr>
                        <td><a href="/edit/{{ticket.id}}" class="btn btn-primary">Edit</a><a href="/delete/{{ticket.id}}" class="float-right btn btn-danger">Delete</a></td>
                        <td colspan="4"><a href="/payment" class="float-right btn btn-success">Checkout</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

styles.css

@media only screen and (max-width: 800px) {

    /* Force table to not be like tables anymore */
    table, 
    thead, 
    tbody, 
    th, 
    td, 
    tr { 
        display: block; 
    }


    tr { border: 2px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;

    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }



}