Re-order right sidebar under left sidebar with flexbox

Question

I'm trying to achieve the following layouts. Apparently it's 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 want the following effect:

Large screen:

    _____ ________ _____
   |     |        |     |
   | l-b | center | r-b |
    `````|        |     |
          ```````` `````

medium screen (I CANNOT GET THIS ONE TO WORK):

    _____ ________ 
   |     |        |
   | l-b | center |
   |`````|        |
   | r-b |```````` 
   |     | 
   ´´´´´´

small screen:

    ________ 
   |        |
   |  l-b   |
   |````````|
   |  r-b   | 
   |        | 
   |````````|
   | 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 the right bar:

    _____ ________ 
   |     |        |
   | l-b | center |
   |`````|        |
   |`````|```````` 
   | r-b |
   |     | 
   ´´´´´´