@media (max-width: 767px) {

    .modal .table-responsive table {
        display: grid;
    }

    .table-responsive {
        overflow-x: auto;
        white-space: wrap;
    }
    .table-responsive table {
        display: flex;
        flex-wrap: wrap;
    }
    .table-responsive table thead {
        display: none;
    }

    .table-responsive table tbody tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #ddd;
    }

    .table-responsive table.table-grid {
        display: grid;
    }

    .table-responsive table.table-grid tbody tr {
        display: grid;
    }

    .table-responsive table tbody td {
        flex-basis: 100%;
        border: none;
        padding: 5px;
        word-break: break-all;
    }
    .table-responsive table tbody td:before {
        content: attr(data-label);
        text-transform: uppercase;
        flex-basis: 100%;
        font-weight: bold;
        display: grid;
    }
}