Moving column to next line using Flex Box

Question

I have three columns, ordering 1,2,3. HTML ```

1

2

3

``` CSS ``` .flex-container { display: flex; } .item { background: orange; padding: 10px auto; color: #fff; font-family: arial; flex-grow: 100; flex-shrink: 50; text-align: center; } .first { order: 1; } .second { order: 2; } .third { order: 3; } ``` What I want when I switch to mobile screen columns should display like this; ``` 1 3 2 ``` Media Query ``` /* Too narrow to support three columns */ @media all and (max-width: 640px) { .second { order: 3; /* And go to second line */ } .third { order: 2; } } ``` Column two should move to next line. Fiddle How can I do this?

Accepted Answer

By default the `flex-direction` is `row`, you should change it to `column` and use `flex-wrap:wrap` (we can write it shortly using `flex-flow:column wrap`). Note that to make the third column jump to the next column, the `.flex-container`'s height should be large enough to contain all the `.first` and `.second` but not enough to contain all 3 items. With just that, you can recognize that the `.third` expand/strecth the whole space (on the second column). So you can try setting its `flex-grow:0` and use `flex-basis:50%`. Here is the code:

```
@media all and (max-width: 640px) {
  .flex-container {
    flex-flow:column wrap;  
    height:40px;   
  }    
  .third {
    flex-grow:0;
    flex-basis:50%;
  }
}
```

Demo.

Here is another solution using column box layout instead of flex-box, it works very well indeed.

Demo 2

Moving column to next line using Flex Box

Solution

Problem