.wrapper {
      display:flex;
      flex-flow: row wrap;
      text-align:center;
      
  }
  
.wrapper > * {
      padding: 10px;
      margin:10px;
      flex: 1 100%;
      border-radius: 10px;
  }
  
.header {
      background: red;
      height:120px;
  }
  
.mobile {
      display:flex;
      height:120px;
      background: pink;
  }
  
.footer {
      background: green;
      height: 90px;
  }
  
 .main {
      text-align:left;
      background: blue;
      height:300px;
      font-size:24px;
  }
  
.side1 {
      background: yellow;
  }
  
.side2 {
      background: brown;
  }

@media all and (min-width: 800px) {
      .mobile {
          display:none;
        }
      
      .main {
          flex:3;
       }
      
      .side1 {
          order:1;
        }
      
      .side2 {
          order:2;
        }
        
      .main {
          order:2;
        }
        
      .footer {
          order:4;
        }
  }
  
@media all and (min-width: 600px) {
  
      .side {
          flex:1;
        }
  }