CSS responsive horizontal and vertical layout

Question

I am trying to build a responsive layout:

Small viewports (e.g. 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

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>

Answer 2

.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