使用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 |
   |     | 
   ´´´´´´