mobile responsive: 'stacked' view, shows 3 columns instead of 2 and breaks display

## Expected Behavior

The mobile view with `responsive:'stacked'` should render 2 columns with KEY - VALUE each taking 50% of the screen Like this screenshot
[https://static.brantu.com/images/content/medium/LRPZ8Vq0r-3ba5f2ddd95e5d34.png](url)

## Current Behavior

The table displays 3 columns, with this shape
KEY VALUE KEY
VALUE KEY VALUE
and so on..

like this screenshot
[https://static.brantu.com/images/content/medium/3qvvul6EG-d15ab1a2d934bd36.png](url)
## Steps to Reproduce (for bugs)

1. display any data while passing `responsive:'stacked'` in options, or not, it falls back to this as default anyway.

## Your Environment

| Tech | Version |
|--------------|---------|
| @material-ui/core | ^3.9.2 |
| MUI-datatables | ^2.0.0-beta.56 |
| React | ^16.7.0 |
| browser | Chrome |

Start by reproducing the table with responsive:'stacked' using the environment versions listed in the issue, then trace the stacked responsive rendering path. Confirm the current three-column layout and verify that the completed change renders each KEY-VALUE pair in two equal-width columns on mobile.

Written by the indexing model from the issue text.