I can not use bootstrap for this task. I use reactjs with radium (Styles like react-native), I tried to do with flexbox but I'm able to use CSS and media queries.

I have a 3 column layout. When accessing it from the desktop, it shows like this:

```
--------------------------
|  column 1 |            |
------------|  column 2  |
|  column 3 |            |
--------------------------

```

The column 1 and 3 height will be the same as column 2.

I want it to be like this when view it from mobile/tablet / resize browser:

```
-------------
|  column 1 |
-------------
|  column 2 |
-------------
|  column 3 |
-------------

```

The column 2 needs to move between the column 1 and 3, the height for each column does not matter in this configuration.

My sample below, I use radium but I can use CSS and Media Queries.

```
columnsContainer: {
    display: "flex",
    flexDirection: "row",
    @media (min-width:"xxx"px): {
        flexDirection: "column"
    }
},
rightColumn: {
    width: "392px",
    @media (min-width:"xxx"px): {
        marginTop: "32px",
        width: "100%"
    }
},
leftColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    }
},
bottomColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    },
}

```

And below my html:

```
<div style={styles.columnsContainer}>
    <div style={styles.leftColumn}>
        Column 1
    </div>
    <div style={styles.rightColumn}>
        Column 2
    </div>
    <div style={styles.bottomColumn}>
        Column 3
    </div>
</div>

```