.table-responsive > thead > tr.test{
    /*Hide <thead> on narrow viewports position: absolute;*/
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}



    .table-responsive > thead > tr,
    .table-responsive > thead > tr > th {
        display: block;
        white-space: normal;
        text-align: center;
    }  

    
    .table-responsive > tbody,
    .table-responsive > tbody > tr,
    .table-responsive > tbody > tr > th,
    .table-responsive > tbody > tr > td {
        display: block;
        text-align: right;
        white-space: normal;
    }  

    .table-responsive > tbody > tr {
        border-bottom: 3px solid #58585a;
    }
    
    
    .table-responsive > tbody > tr > td[data-title]:before {
        content: attr(data-title);
        float: left;
        font-weight: bold;
        font-size: 14px;
    }
    
    .table-responsive > tbody > tr > td img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-height: 150px;
        max-width: 150px;
    }


@media (min-width: 768px) {

    .table-responsive > thead > tr.test {
        position: relative;
        clip: auto;
        height: auto;
        width: auto;
        overflow: auto;
    }

    .table-responsive > tbody {
        display: table-row-group;
    }

        .table-responsive > thead > tr,
        .table-responsive > tbody > tr {
            display: table-row;
            border-bottom: none;
        }

            .table-responsive > thead > tr > th,
            .table-responsive > tbody > tr > td {
                text-align: left;
                display: table-cell;
            }

            .table-responsive > thead > tr > th {
                text-align: center;
            }

            .table-responsive > tbody > tr > td[data-title]:before {
                content: none;
            }

            .table-responsive > thead > tr > th[scope="row"] {
                background-color: transparent;
            }
}

@media (min-width: 1200px) {

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

    .table-responsive > thead > tr > th {
        text-align: center;
    }
}