Re-arranging flex items without absolute position

Question

I wonder if there is any way to achieve this kind of composition using flex box keeping the same structure (that order: box1, box2, box3 and box4).

I got this, but the box4 is pushed down below the other boxes: http://codepen.io/anon/pen/xRVEwW

.container{
  width:600px;
  position:relative;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box2, .box4{
  margin:0 auto;
}
.box1{
  background:pink;
  position:absolute;
  left:0;  top:0;
}
.box2{
  background:lightgreen;
}
.box3{
  background:lightgrey;
  position:absolute;
  right:0;  top:0;
}
.box4{
  background:lightblue;
}

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

Answer 1

I wonder if there is any way to achieve this kind of composition using flex box keeping the same structure.

Yes, there is a way to achieve he layout without any changes to the HTML. Here you go:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 600px;
  height: 500px;
}

.box1 { flex: 100%; order: 0; }
.box2 { flex: 80%;  order: 1; }
.box3 { flex: 100%; order: 3; }
.box4 { flex: 20%;  order: 2; }

.box1 { background: pink;      width: 200px; }
.box2 { background:lightgreen; width: 200px; }
.box3 { background:lightgrey;  width: 200px; }
.box4 { background:lightblue;  width: 200px; }

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

revised codepen

Key points:

• Use a column direction, wrap-enabled flex container.
• Define a height for the container (so flex items know where to wrap).
• The first and third columns get full height (flex-basis: 100%, or shorthand flex: 100%).
• Second and fourth columns combine, so adjust their heights as necessary and use order property to move column 4 before column 3.

Answer 2

Erase the flex properties and use float:

float:left on boxes 1 and 2, float:right on boxes 3 and 4. No HTML change necessary:

.container{
  width:600px;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box1{
  background:pink;
  float: left;
}
.box2{
  background:lightgreen;
  float: left;
}
.box3{
  background:lightgrey;
  float: right;
}
.box4{
  background:lightblue;
  margin:0 auto;
  float: right;
}

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

http://codepen.io/anon/pen/eBZBYL

Answer 3

• Wrap box2 and box4 in a common div
• Add align-items: flex-start; (or baseline) to .container

.container{
  width:600px;
  display:flex;
  flex-wrap:wrap;
  align-items: flex-start;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box1{
  background:pink;
}
.box2{
  background:lightgreen;
}
.box3{
  background:lightgrey;
}
.box4{
  background:lightblue;
}

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div>
    <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris.</div>
    <div class="box4">Box 4.</div>
  </div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue,
    id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
</div>

http://codepen.io/borkdude/pen/VmaKRZ