@media only screen and (max-width: 770px) {
 
    #responsive > thead,
    #responsive > tbody,
    #responsive > tbody > tr,
    #responsive > thead > tr,
    #responsive > tfoot > tr,
    #responsive > tbody > tr > td,
    #responsive > thead > tr > td,
    #responsive > tfoot > tr > td
    {
        padding: 5px;
        display: block;
    }
    #responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #responsive > tbody > tr > td,
    #responsive > tfoot > tr > td {
        position: relative;
        padding-right: 50px;
        white-space: normal;
        word-break: break-all;
        text-align: left;
    }
    #responsive > tbody > tr > td > .btn,
    #responsive > tfoot > tr > td> .btn {
        word-break:normal;
    }
    #responsive > tbody > tr > td:before,
    #responsive > tfoot > tr > td:before {
        position: absolute;
        right: 3px;
        float:left;
        width: 30%;
        color:black;
        padding-right: 10px;
        white-space: nowrap;
        text-align: right;
        font-weight: bold;
        content: attr(title);
    }
}