The behavior is inspired by the responsive utilities of Bootstrap: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/ 

The column visibility feature may be implemented through the `visibleFrom` and `hiddenFrom` column properties. These allow columns to be shown / hidden based on the **viewport size**. For example,

```
    {
        visibleFrom: 1024, // show column on viewports bigger than or equal to 1024px
        hiddenFrom: 680 // hide column on viewports bigger than or equal to 680px
    }
```

We can cater for developers who use Bootstrap by providing presets, based on the Bootstrap 4 responsive monikers - https://v4-alpha.getbootstrap.com/layout/grid/#variables  (`xs` / `sm` / `md` / `lg` / `xl`). See the link for the default values.

```
    {
        visibleFrom: "md", // show column on medium-sized viewports (and above)
        hiddenFrom: "sm" // hide column on small-sized viewports (and above)
    }
```
The `visibleFrom` and `hiddenFrom` properties influence the default column visibility. The `visible` property overrides the default visibility -- columns declared as `visible: false`, show on every device, and columns with `visible: false` won't show at all. Notice that the `visible` property is 

The resize sensor component will be used to create the responsive pager, as the pager behavior is related to the grid width and not the viewport width.

Interoperability with the column menu (show/hide columns) can be achieved through the use of the `visible` property, to allow the default behavior to be overwritten. This raises problems when the application is switched between different screens, as the menu needs to work with a nullable boolean.