Responsive Table - vertical expand, built with pure css flexbox --> codepen: https://codepen.io/anon/pen/zpejXw

responsive-table.html

<div class="table-container">
    <div class="table">
      <div class="table-head">
        <div class="table-row">
          <div class="head-mobile">head 1</div>
          <div class="head-mobile">head 2</div>
          <div class="head-mobile">head 3</div>
          <div class="head">head 4</div>
          <div class="head">head 5</div>
          <div class="head">head 6</div>
          <div class="head">head 7</div>
      </div>
    </div>

    <div class="table-body">
      <div class="table-row">
        <div class="cell-mobile">cell 1</div>
        <div class="cell-mobile">cell 2</div>
        <div class="cell-mobile">cell 3</div>
        <div class="cell">cell 4</div>
        <div class="cell">cell 5</div>
        <div class="cell">cell 6</div>
        <div class="cell">cell 7</div>
      </div>
      
      <div class="table-row extra-row">
        Extra Row
      </div>

      <div class="table-row">
        <div class="cell-mobile">cell 1</div>
        <div class="cell-mobile">cell 2</div>
        <div class="cell-mobile">cell 3</div>
        <div class="cell">cell 4</div>
        <div class="cell">cell 5</div>
        <div class="cell">cell 6</div>
        <div class="cell">cell 7</div>
      </div>
      
      <div class="table-row extra-row">
          Extra Row
      </div>

      <div class="table-row">
        <div class="cell-mobile">cell 1</div>
        <div class="cell-mobile">cell 2</div>
        <div class="cell-mobile">cell 3</div>
        <div class="cell">cell 4</div>
        <div class="cell">cell 5</div>
        <div class="cell">cell 6</div>
        <div class="cell">cell 7</div>
      </div>
      
      <div class="table-row extra-row">
        Extra Row
      </div>
    </div>
  </div>
</div>

responsive-table.scss

.table-container {
  display: flex;
  justify-content: center;
  height: auto;
  width: 100%;
  background-color: #ddd;
  padding: 10vh 0 10vh 0;
  .table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75%;
    height: auto;
    border: 1px solid gray;
    background-color: #FFFFFF;
    .table-head {
      display: flex;
      flex-direction: column;
      .table-row {
        display: flex;
        border: 3px solid blue;
        .head, .head-mobile {
          display: flex;
          flex: 1 1 auto;
          border: 3px solid #008BFF;
        }
      }
    }

    .table-body {
      display: flex;
      flex-direction: column;
      .table-row {
        display: flex;
        border: 3px solid #13856D;
        .cell, .cell-mobile {
          display: flex;
          flex: 1 1 auto;
          border: 3px solid #22CC43;
        }
      }
      .table-row.extra-row {
        display: none;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  .table-container {
    .table {
      .table-head {
        .table-row {
          .head {
              display: none;
          }
        }
      }
      .table-body {
        .table-row {
          .cell {
            display: none;
          }
        }
        .table-row.extra-row {
          display: flex;
        }
      }
    }
  }
}