Hidding columns for small devices

I'm using bootstrap 3 and bootgrid to display tables.

Is there a way to hide some columns in small devices ? I'm using class hidden-xs in th elements, but it still display data (not the columns).

My questions are:

1. How to hide a column for small devices.
2. How to hide the navigation header only for small devices ?

in this solution you need to use Media Queries It uses the @media rule to include a block of CSS properties only if a certain condition is true. like this :

@media only screen and (max-width: 600px) {
body {
    background-color: lightblue;
}

}

here you can set condition on screen that < 600 px , do it for diffrent type of screen. for you i hope this is the way :

  @media (max-width: 500px ) {

    #columnsID {
        display: none;
    }
}