Column - missing an order prop

[zolza]

Is there any way of changing the order of elements depending on breakpoints? For now I can only hide and show elements but it does not seem like a proper solution?

[LoicMahieu]

Hi @zolza
I don't really understand the problem ;) Could you please post a codesandbox or other to illustrate it ?
Thanks!

[joetidee]

I have the same request. For example, it would be good to be able to set the order of the columns based on the viewport. Perhaps something like this:

<Grid>
  <Row order={{
    xs: [3,2,1],
    sm: [1,3,2],
  }}>
    <Col>
      ...
    </Col>
    <Col>
      ...
    </Col>
    <Col>
      ...
    </Col>
  </Row>
</Grid>

Maybe utilizing the flex order property:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Note that in the above example, if the page is viewed at a viewport that is not specified, the columns will order naturally.

In addition, it would also be handy to do something similar with the column reverse prop so that, in addition to taking a boolean value, it could take either xs,sm,md or lg so that the columns would reverse only at a specific viewport size.

[vemundeldegard]

Hello!

I am missing the same.

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. .item { order: <integer>; /* default is 0 */ }

[LoicMahieu]

Thanks for explanation.
Yep indeed it could be useful. I don't have time to work on this but feel free to try to implement it and submit a PR ;)