Row props overwriting one another.

[taylorpreston]

When declaring the prop center="xs" the Row never lets go of the center class after it gets bigger than the declared "xs" size in the ThemeProvider component. I did some digging and it seems like the issue has to do with the order in which the classes are defined.
`

<Row start="sm" center="xs">
  <Col>Foo</Col>
</Row>

`

If I add the between prop to the Row component then the between takes over after the "xs" size declaration, but the start class is never added at the "md" size. Any suggestions on how to fix this would be appreciated. 👍

`

<Row start="md" between="sm" center="xs">
  <Col>Foo</Col>
</Row>

`

[LoicMahieu]

Hi @taylorpreston
Could you make a sample on codesandbox or other for illustrate ? Thanks

[konstantin24121]

I think @taylorpreston say that in this case https://codesandbox.io/s/38rnvm78lp Col should align at left when we on md size

[taylorpreston]

@konstantin24121 you are exactly right! Sorry, I should have made a codesandbox a while ago.

[LoicMahieu]

Hi @taylorpreston @konstantin24121

Thanks for the codesandbox. Yep it does not work as expected.
The problem is fundamentally the way we use the media queries. Indeed, when we talk about xs, it says from xs to infinite and not from xs to md.
I'm not saying that it's good but it's in any case what's in place.

I think the same bug could happens for these Row props: start, center, end, top, middle, bottom, around, between, first, last

Maybe it could be fixed by generate a media query for each known "dimension" names in order to cancel the behavior introduced by the previous.