Reorder the right sidebar under the left sidebar using flexbox

Question

I am trying to execute the following layouts. Apparently this is not possible flexbox. What is the best way to achieve this effect without javascript?

I have the following elements:

<div class='container'> <div class='left-bar'/> <div class='center-bar'/> <div class='right-bar'/> </div> 

I need the following effect:

Big screen:

  _____ ________ _____ | | | | | lb | center | rb | `````| | | ```````` ````` 

middle screen (I CAN'T RECEIVE THIS ONE FOR WORK):

  _____ ________ | | | | lb | center | |`````| | | rb |```````` | | ´´´´´´ 

small screen:

  ________ | | | lb | |````````| | rb | | | |````````| | center | | | ```````` 

At the moment I tried this without success:

  .container { display: flex; flex-flow: row wrap; } @media (max-width: 960px) { .left-bar { order: 1; } .center-bar { order: 3; } .right-bar { order: 2; } } 

This is what happens, I get a space between the left and right strip:

  _____ ________ | | | | lb | center | |`````| | |`````|```````` | rb | | | ´´´´´´