Right-aligning columns results in right-aligned headers in mobile view

When right-aligning a column, the mobile view will also have a right-aligned header in the mobile card view. This doesn't really make sense for a card view since the headers move to the left of the data.

## Expected Behavior

In the mobile card view, headers should always be left-aligned since they appear vertically.

## Current Behavior

Currently right-aligned headers are still right-aligned in vertical view.

## Steps to Reproduce (for bugs)

https://codesandbox.io/s/vigorous-goldwasser-tb53v
1. Right align one header in the table
2. Use mobile view either default or with "responsive": "vertical"

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.11.3 |
| MUI-datatables | 3.7.6 |
| React | 17.0.1 |
| browser | Chrome 89.0.4389.82 |

Start with the linked CodeSandbox reproduction and inspect the mobile card view behavior for vertically responsive tables. Confirm that right-aligning a column causes its mobile header to align right, then verify that headers are left-aligned while the associated data retains its column alignment.

Written by the indexing model from the issue text.