使用flexbox重新订购左侧边栏下的右侧边栏

Question

我试图实现以下布局。显然，它不可能是flexbox。没有javascript实现此效果的最佳方法是什么？

我有以下要素：

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

我想要以下效果：

大屏幕：

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

中等屏幕（我不能让这一个工作）：

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

小屏幕：

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

目前我尝试了这个没有成功：

   .container {
     display: flex;
     flex-flow: row wrap;
   }

   @media (max-width: 960px) {
   .left-bar {
       order: 1;
     }
     .center-bar {
       order: 3;
     }
     .right-bar {
       order: 2;
     }
   }

这就是发生的事情，我在左右栏之间留出了一个空格：

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