Flexbox内的响应式地铁块

Question

你如何在flexbox中包含地铁外观块，以保持响应？

这是我到目前为止（html）：

    `<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>`

然后这将是css部分：

    `#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;
     }
     }`

到目前为止，它在所有设备上运行良好，中间部分应位于桌面和更大的平板电脑的中间位置，并且在智能手机上位于顶部。我想在里面有一个图像（居中）。在左侧和右侧部分，我想有4个地铁外观按钮（左侧2个，右侧2个），中间带有图标，左下角有标题，就像它在Windows 8地铁外观一样< / p>

你如何从这里开始制作那些地铁看块？