@media (min-width: 320px) and (max-width: 767px) {
    .table-responsive,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }

        .table-responsive > thead > tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .table-responsive > tbody > tr {
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

            .table-responsive > tbody > tr:first-child {
                border-radius: 3px 3px 0 0;
                border-top: none;
            }

            .table-responsive > tbody > tr:last-child {
                border-radius: 0 0 3px 3px;
                border-bottom: none;
            }

            .table-responsive > tbody > tr td {
                border: none;
                border-bottom: 1px solid #ccc;
                position: relative;
                padding-left: 30% !important;
                width: 100%;
                overflow: hidden;
            }

                .table-responsive > tbody > tr td:before {
                    content: attr(data-title);
                    position: absolute;
                    top: 15px;
                    left: 14px;
                    width: 30%;
                    padding-right: 10px;
                    white-space: nowrap;
                    font-size: 14px;
                }

                .table-responsive > tbody > tr td:first-child {
                    text-align: left;
                }

        .table-responsive.table-order > tbody > tr:nth-child(-n + 3) > td:first-child {
            padding: 25px 0 25px 30% !important;
            background-position: left 32% center;
        }

            .table-responsive.table-order > tbody > tr:nth-child(-n + 3) > td:first-child span {
                left: 32%;
            }
}