@media only screen and (max-width: 767px) {
  
  /* override bootstrap table-responsive scroll */
  .table-responsive {
    overflow: hidden !important;
  }
  
  /* Force table to not be like tables anymore */
  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr,
  .table-responsive td[class*="col-"],
  .table-responsive th[class*="col-"] {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .table-responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  /* Get rid of the extra margin at the bottom of the table. */
  .table-responsive {
    margin-bottom: 0;
  }

  .table-responsive td,
  .table-responsive td[class*="col-"],
  .table-responsive th[class*="col-"] {
    /* Behave like a "row" */
    /* had to use !important to override bootstrap's css for table-responsive */
    border: none !important;
    position: relative;
    float: none;
    /* had to use !important to override bootstrap's css for table-responsive */
    padding-left: 35% !important;
    white-space: normal !important;
    text-align:left;
    word-wrap: break-word;
  }

  /* Render each row as a section */
  .table-responsive tr {
    margin: 8px 0 0 0;
    padding-left: 10px;
    padding-bottom: 3px;
    border-bottom: 1px solid #ebeff6; /* this is @border-color */
  }

  /* The last section doesn't get a bottom margin */
  .table-responsive tr:last-of-type {
    border-bottom: 0;
  }

  /* The data table's panel renders a border already, so don't render our own */
  .data-table.panel .table-responsive {
    border: none;
  }

  /* Turn off striping when rendering rows as cards. */
  .panel.table-responsive .table-striped > tbody > tr:nth-child(odd),
  .table-responsive .table-striped > tbody > tr:nth-child(odd) {
    background-color: #fff;
  }

  .table-responsive td:before {
    /* Now like a table header */
    position: absolute;
    /* left value to mimic padding */
    left: 6px;
    width: 30%;
    white-space: normal;
    text-align:left;
    font-weight: bold;
  }
   
  /* Label the data */
  .table-responsive td:before {
    content: attr(data-title);
  }
  
  /*
  .wide-title class for responsive tables with longer column titles
  */
  .table-responsive.table-responsive-wide-title td:before {
    width: 40%;
  }

  .table-responsive.table-responsive-wide-title td,
  .table-responsive.table-responsive-wide-title td[class*="col-"],
  .table-responsive.table-responsive-wide-title th[class*="col-"] {
    /* had to use !important to override bootstrap's css for table-responsive */
    padding-left: 45% !important;
  }

  .table-responsive.table-responsive-wide-title td.description-text {
    /* had to use !important to override bootstrap's css for table-responsive */
    padding-left: 6px !important;
  }

  .table-responsive.table-responsive-wide-title td.description-text div.collapse {
    margin-left: 8px;
  }

  .table-responsive.table-responsive-wide-title td.description-text span.text-description {
    padding-left: 45%;
  }

  .table-responsive.table-responsive-wide-title td.description-text div.description-text {
    padding: 6px;
  }

  .table-responsive table {
    border: none;
  }
}