Flex sample

by Sreeraj Saseendran

HTML

<div class="foo">
  <div class="a">
    child1
  </div>
  <div class="b">
    child2 <br />
   child2 <br />
   child2 <br />
   child2 <br />
   child2 <br />
   
  </div>
  <div class="c">
    child3
  </div>
  <div class="d">
  child4
  </div>
</div>

CSS

.foo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  
  /*height: 200px;*//*without adding height this wont e possible*/
  position:relative;
 
}

.a, .c {
  flex: 0 0 auto;  
  background: green;
  width: 60%;
}

.b {
  flex: 0 0 100%;
  order: 1;
  background: blue;
  position: absolute;
    right: 0;
    width:40%;
  }

.c {
  background: red;}
  .d {
    background: yellow;
    width:100%;
    flex-basis: 100%;
  }