Boostrap 4 Stackable Tables

boostrap-table-stack.scss

.table-stack {
  display: block;
}

.table-stack tr {
  display: block;
}

.table-stack thead {
  display: none;
}

.table-stack tbody {
  display:block;
}

.table-stack td{
  display: block;
  border: none;
  &:before {
    content: attr(data-title);
    display:block;
    text-transform: uppercase;
    @extend small;
    @extend .text-muted;
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  @include media-breakpoint-up($breakpoint) {

    .table-stack.table-horizontal#{$infix} {
      display: table;
    }
    .table-stack.table-horizontal#{$infix} thead {
      display: table-header-group;
    }
    .table-stack.table-horizontal#{$infix} tbody {
      display: table-row-group;
    }
    .table-stack.table-horizontal#{$infix} th {
      display: table-cell;
    }
    .table-stack.table-horizontal#{$infix} tr {
      display: table-row;
    }
    .table-stack.table-horizontal#{$infix} td{
      display: table-cell;
      &:before {
        display:none;
      }
    }

  }
}

<table class="table table-striped table-stack table-horizontal-md">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td data-title="First">Mark</td>
      <td data-title="Last">Otto</td>
      <td> data-title="Handle"@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td data-title="First">Jacob</td>
      <td data-title="Last">Thornton</td>
      <td data-title="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td data-title="First">Larry</td>
      <td data-title="Last">the Bird</td>
      <td data-title="Handle">@twitter</td>
    </tr>
  </tbody>
</table>