Untitled

/**
 * The first commented line is your dabblet’s title
 */
 #body {
   min-height: 100%;
   background: beige;
   width: 100%;
}

#main {
   display: -webkit-flexbox;
   width: 100%;
   height: 100%;
}

#main div {
    flex-pack: center;
    flex: 1;
    border: 8px solid pink;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 6px;
    margin: 4px;
    transition: all 0.3s ease-in-out;
}

#main div:nth-child(2) {
    flex: 2;
}

#main div img {
    width: 100%;
    max-width: 700px;
}

#main div:last-child {
    margin-right: 0;
}

@media all and (orientation: portrait) {
    #main {
         flex-direction: column-reverse;
    }
}

@media all and (orientation: landscape) {
   #main {
       flex-direction: row;
   }
   #main div {
      border-color: green;
   }
}

@media handheld {
   #media div {
       border: 0;
       padding: 2px;
       background: grey;
       color: purple;
   }
}