Material-ui: Change the order of Grid Stacking when converting to mobile view

[Uneetpatel7]

I have a problem with the order of stacking of grid items whenever browser shrinks.

This is what I want on the normal desktop screen(lg):

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

But After Shrinking the browser I am getting the following result:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

Can I with material ui Grid layout achieve this on a mobile screen:

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

I am currenlty using material-ui version 3.9.2. I am sorry for Asking it here, as there is no response from anyone on stack-overflow. Here is the stack overflow question link.

[oliviertassinari]

@Uneetpatel7 The best solution right now is to use the breakpoints to change the flexbox order of your item. Could you provide a minimalize code sandbox reproducing your problem on StackOverflow? I will answer the question there. Alternatively, you can use the Box with an order value based on the breakpoint.

[Uneetpatel7]

Order of appearance in screen size lg is 1 | 2 | 3 (from left to Right)
When the screen size is xs then the grid appers in the order 1->2->3 (from top to bottom) but
I need in the order say 1->3->2(from top to bottom) or say 2->1->3 or any required order.

Here is the minimal working code SandBox example

[oliviertassinari]

Answered.