Position right div over the left in mobile view

Is it possible to stack right side div over the left sided div in mobile view with the help of CSS? The default behaviour is the right sided div floats under the left sided div.

CSS:

.left {
    position: relative;
    float: left;
    background: #F48024;
    width:576px;
    height: 324px;
}
.right {
    position: relative;
    float: left;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

HTML:

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

To understand it, have a look on diagram please. I want 3rd layout given in this diagram.