CSS responsive horizontal and vertical layout

Question

I am trying to build a responsive layout:

Small viewports (eg max-width 750px):

    +---------------+
    |      1        |
    +----+-----+----+
    |  2 |     |    |
    +----+  4  |  5 |
    |  3 |     |    |
    +----+-----+----+

Large viewports (min-width 751px):

    +---+---+---+---+
    | 1 |   |   |   |
    +---+ 3 | 4 | 5 |
    | 2 |   |   |   |
    +---+---+---+---+

I tried with flex, display: table and others. The only solution I found is to duplicate the markup, but that's not ideal. Is there any other possibility?

Boxes have variable-length text content, thus unfortunately fixed height is not an option.

Answer 1

 .header{ width:100%; height:100px; border:1px solid #ff9900; } .l1,.l2{ width:33%; float:left; border:1px solid green; height:100px; margin-right:1px; } .l3{ float:right; width:32%; height:100px; border:1px solid red; } .a1,.a2,.a3,.a4{ width:24%; float:left; border:1px solid green; height:100px; margin-right:1px; } 

 <div class="header"> <h1>header</h1> </div> <div class="body"> <div class="l1"> <div style="width:100%; height:50%; background:#ff8800;">1</div> <div style="width:100%; height:50%; background:#ffff00;">2</div> </div> <div class="l2">3</div> <div class="l3">4</div> </div> <br/> This Is Next Lay Out <div class="header"> <h1>header</h1> </div> <div class="body"> <div class="a1"> <div style="width:100%; height:50%; background:#ff8800;">1</div> <div style="width:100%; height:50%; background:#ffff00;">2</div> </div> <div class="a2">3</div> <div class="a3">4</div> <div class="a4">5</div> </div> 

Try It Once

Answer 2

I did it using flexbox and position: relative .

Working Fiddle

 .parent { display: flex; flex-wrap: wrap; height: 400px; } .box { box-shadow: inset 0px 0px 0px 1px #ccc; flex: 1; height: calc(100% / 3); line-height: 150px; text-align: center; position: relative; } .one { flex: 1 0 100%; } .two, .four, .five, .six { flex: 1 0 calc(100% / 3); /* min-width: calc(100% / 4) */ } .four, .five, .six { height: calc(200% / 3); } .three { order: 1; max-width: calc(100% / 3); top: calc(-100% + (200% / 3)); } @media (max-width: 500px) { .one {} .one, .two, .three, .four, .five { flex: 1 0 calc(100% / 4); max-width: calc(100% / 4); top: 0px; } .one, .two { height: calc(100% / 2); } .three, .four, .five { height: 100%; } .two { order: 1; top: calc(-100% / 2); } .three { order: 0; } } 

 <div class="parent"> <div class="box one">1</div> <div class="box two">2</div> <div class="box three">3</div> <div class="box four">4</div> <div class="box five">5</div> </div>