flexbox tiles of different sizes

<!DOCTYPE html>
<html>

<head>
  <style>
    html, body {
      height:100%;
      width:100%;
    }
    #page {
      width:80%;
      height:80%;
      margin:0 auto;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      background-color: #efefef;
      padding:5px;
    }
    .row {
      -webkit-flex:1;
      display: -webkit-flex;
      background-color: #dfdfdf;
      padding:5px;
      margin:5px;
    }
    .row3 {
      -webkit-flex:0.52;
    }
    .col1,
    .col2 {
      -webkit-flex:1;
      background-color: #cfcfcf;
      padding:5px;
      margin:5px;
    }
    .col2 {
      -webkit-flex:0.62;
    }
    .col1 > img, .col2 > img {
      max-width:100%;
      height:auto;
      display:block;
    }
  </style>
</head>

<body>
  <div id="page">
    <div class="row">
      <div class="col1">
        col1
      </div>
      <div class="col2">
        col2
      </div>
    </div>
    <div class="row">
      <div class="col1">
      col1
      </div>
      <div class="col2">
      col2
      </div>
    </div>
    <div class="row row3">
      <div class="col1">
      col1
      </div>
      <div class="col2">
      col2
      </div>
    </div>
  </div>
</body>

</html>