1. Insert the Table To List plugin after loading the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/tableToList.js"></script>

2. Call the plugin on the HTML table and specify the container during which the converted listing shows.

<div id="parent" class="container">
  <table class="table" id="myTable">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Task</th>
        <th scope="col">Progress</th>
        <th scope="col">Label</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Update software</td>
        <td>55</td>
        <td>Modrate</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Clean database</td>
        <td>70</td>
        <td>Good</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cron job running</td>
        <td>30</td>
        <td>Not Bad</td>
      </tr>
    </tbody>
  </table>
</div>

$(function() {
  getList('#myTable', '#parent');
});

Convert Table To List In Mobile View, Table To List Plugin/Github, bootstrap table responsive in mobile view, responsive table columns to rows

See Demo And Download