title: Positioning two blocks in absolute position for desktop and relative position for mobile using CSS or Jquery
body: <p>I am trying to perform the below task as shown in the image. I tried with css coding and failed to this. Is it possible with CSS, if not how to achieve this task with jquery.</p>
  
  <p><strong>For desktop :</strong> 
  I am trying Block 1 and block 2 are in absolute position to container, while block 2 position relative to block 1 with height auto. Block 3 position relative to container.</p>
  
  <p><strong>For Mobile</strong>
  In the mobile view I want only block 1 in the absolute bottom position of the container and block 2 and block 3 position relative to container as shown in the picture. </p>
  
  <p><img src="https://i.stack.imgur.com/h1EBq.jpg" alt="I want to perform this task using CSS"></p>
  
  <pre><code>&lt;style&gt;
  .container{
      width:100%;
      min-height:768px;
      height:auto;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:absolute;
      display:block;
      background:#666;
  }
  .b-50{
      width:50%;
  }
  .pinned1{
      background:#888;
      float:right;
      display:block;
      padding:20px;
      height:auto;
      color:#FFF;
  }
  .pinned2{
      background:#888;
      position:relative;
      display:block;
      float:right;
      color:#FFF;
      padding:20px;
      height:auto;
  }
  .block3{
      display:block;
      height:auto;
      position:relative;
      margin-top:auto;
      top:100%;
  }
  @media all and (max-width: 767px){
  .b-50{
      width:100%;
  }
  .pinned2{
      position:absolute;
      top:100%;
  }
  
  }
  &lt;/style&gt;
  &lt;div class="container"&gt;
            &lt;div class="b-50 pinned1"&gt;
                &lt;h1&gt;Block 1&lt;/h1&gt;
            &lt;/div&gt;    
            &lt;div class="b-50 pinned2"&gt;
                &lt;h2&gt;Block 2&lt;/h2&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="block3"&gt;
      &lt;h3&gt;Block 3&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/LSB3a/" rel="nofollow noreferrer">Demo JSFIDDLDE</a></p>