Hello everyone, 

I have been in the process of optimizing our processes on mobile devices and there is one thing that I can't seem to get around at this point, in regards to styling the tables similarly to how Laserfiche automatically does when screen viewport size is below ~600 px;  it seems this styling is removed afterwards, which bunches all of my table data together and ultimately runs off of the page.  I want to be able to use media queries to style the tables so that all the labels and table data is displayed in a block format.  Has anyone been able to replicate this successfully similar to how Laserfiche does it?  Below image shows how I want my table to look

Edit:  Okay, so I have worked on this for a couple of hours and was able to get this pretty close.  I will paste my below CSS for anyone else that needs help in future. 

    .cf-field, .cf-large, .cf-medium, .cf-small, .select2-container, .quarterWidth, .cf-xlarge {        width: 100% !important; display: block !important; }
      .cf-table { width: 100% !important; display: block !important; }
      .cf-table th { display: block !important; width: 100% !important; height: auto !important; overflow: initial !important; }
      .cf-table td { position: relative !important; display: block !important; }
      .cf-col-label { transform: none !important; display: inline-block !important; }
      .cf-table tbody label { display: inline-block !important; }
      .cf-table thead { display: none !important; }
      .cf-table tbody td:not(:first-child) { padding: 5px 10px !important; }
      .truncate { display: block !important; width: 100% !important; }