Responsive Download: hide columns based on the browser size (plug in not work on smart phones?)

Using https://datatables.net/download/index I picked responsive which automatically hides columns as screen size changes using this code:

 ` <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.css"/>`

This worked as I moved the screen smaller on my computer; however, did not hide columns or give the cool setup with the circle buttons on a smart phone. Project link is here: https://databasetable-net.000webhostapp.com/

Is there an easy way to get the Responsive plug in to work on smart phones?

=========================================================

Also, less importantly, I noticed using <th class=hidden-xsor @media (max-width: 700px) {.hideClass{display:none;}} seems to only work for client-side and not server side.

The <th> header would hide but the data would still show up. Can I confirm if this is true?

Thanks.