@mixin table-transpose() {
  thead {
    display:                                                none;
  }
  tr {
    @include                                                make-row();
  }
  td {
    @include                                                make-col(12);

    text-align:                                             left !important;
    padding-top:                                            map-get($spacers, 1) !important;
    padding-bottom:                                         map-get($spacers, 1) !important;

    &:before {
      color:                                                $table-head-color;
      content:                                              attr(data-label);
      font-weight:                                          bold;
      height:                                               50%;
      width:                                                100%;
      padding:                                              0px;
    }
  }
}

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

  @include media-breakpoint-up($breakpoint) {
    .table-transpose#{$infix} {
      @include                                              table-transpose()
    }
  }
  @include media-breakpoint-down($breakpoint) {
    .table-transpose#{$infix}-d {
      @include                                              table-transpose()
    }
  }
}