Css flexbox内的快速响应地铁模块

您如何将metro外观块包含在flexbox中，以保持其响应性

这是我目前所拥有的（html）：

到目前为止，它在所有设备上都能很好地工作，在台式机和更大的平板电脑上，中间部分应该在中间，在智能手机上应该在顶部。我想在里面有一个图像（居中）。在左侧和右侧部分，我希望有4个metro外观按钮（2个在左侧，2个在右侧），图标在中间，标题在左下角，就像在Windows8 metro外观中一样

---

从这里开始，你将如何让地铁看起来像街区？

你尝试过什么？包括演示也很有帮助：

    `<div id='main22'>
     <middle22>Middle section with a picture</middle22>
     <left22>Left side (metro look blocks)</left22>
     <right22>Right side (metro look blocks)</right22>
     </div>`

    `#main22 {
     min-height: auto;
     margin: 0px;
     padding: 0px;
     display: -webkit-flex;
     display:         flex;
     -webkit-flex-flow: row;
       flex-flow: row;
     }

     #main22 > middle22 {
     margin: 2px;
     padding: 3px;
     background: #aaaaaa;
     -webkit-flex: 3 1 30%;
       flex: 3 1 30%;
     -webkit-order: 2;
       order: 2;
     }

     #main22 > left22 {
     margin: 2px;
     padding: 3px;
     background: #bbbbbb;
     -webkit-flex: 1 6 30%;
       flex: 1 6 30%;
     -webkit-order: 1;
       order: 1;
     }

     #main22 > right22 {
     margin: 2px;
     padding: 3px;

     background: #cccccc;
     -webkit-flex: 1 6 30%;
       flex: 1 6 30%;
     -webkit-order: 3;
       order: 3;
     }

     @media all and (max-width: 640px) {

     #main22 {
     -webkit-flex-flow: column;
        flex-flow: column;
      }

     #main22 > middle22, #main22 > left22, #main22 > right22 {
     -webkit-order: 0;
        order: 0;
     }

     #main22 > left22, #main22 > right22 {
     min-height: 50px;
     max-height: auto;
     }
     }`