Cannot get responsive to work

I have a table that is being created with the responsive property of true

It is adding the dtr-inline class to my table but the table is not breaking on the breakpoints and no matter the screensize, the rows are not becoming children of the parent rows and the collapse class is notbeing added. I am ending up with this HTML for my table...

<table id="member-details" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" cellspacing="0" aria-describedby="member-details_info"><thead><tr role="row"><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay No: activate to sort column ascending">Pay No</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending">Name</th><th class="sorting_asc" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Ni.No: activate to sort column descending">Ni.No</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="DOB: activate to sort column ascending">DOB</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Dept: activate to sort column ascending">Dept</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Location: activate to sort column ascending">Location</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Pay point: activate to sort column ascending">Pay point</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Scheme: activate to sort column ascending">Scheme</th><th class="sorting" tabindex="0" aria-controls="member-details" rowspan="1" colspan="1" aria-label="Category: activate to sort column ascending">Category</th><th class="details-control sorting_disabled" rowspan="1" colspan="1" style="width: 10%;" aria-label="Options">Options</th></tr></thead><tbody>...</tbody></table>

My table also uses bootstrap and I am loading the JS and CSS in this order

      "Scripts/vendor/jquery-1.12.4.js",
      "Scripts/vendor/datatables-1.10.15.js",
      "Scripts/vendor/dataTables.responsive.js",
      "Scripts/vendor/datatables-select-1.2.2.js",
      "Scripts/vendor/less-1.5.1.min.js",
      "Scripts/vendor/bootstrap.min.js",
      "Scripts/vendor/dataTables.bootstrap.min.js",

      "Content/bootstrap.min.css",
      "Content/font-awesome.min.css",
      "Content/jquery.dataTables.min.css",
      "Content/responsive.dataTables.css",
            "Content/responsive.bootstrap.css",

and initiating the table as follows

   !$.fn.DataTable.isDataTable("#" + domElement) ?
                      $("#" + domElement).DataTable({
                          responsive: true,
                          language: {
                              "emptyTable": "No records found",
                              "processing": eq.api.spinner()
                          },
                          processing: true,
                          serverSide: true,
                          info: true,
                          stateSave: true,
                          bFilter: false,
                          bAutoWidth: false,
                          lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
                          columns: columns,
                          ajax: ajaxPart,

Am I doing something wrong? Can responsive not be used with bootstrap?

I am loading the responsive resources first

Mike