Child element on top of parent element on a small screen : I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear normally inside its parent on a large screen, [as in this image.][1]

But on a small screen, the nested div needs to appear to be"on top of" the parent div, [as in this image.][2]

I don't want to position the child element absolutely, because it's a very poor and inflexible choice, especially for a responsive page.

HTML for divs:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div class="container-div">
      <div class="child-div">
        ...
      </div>
    </div>

<!-- end snippet -->


  [1]: http://i.stack.imgur.com/Z1Vs9.jpg
  [2]: http://i.stack.imgur.com/mvhcL.jpg