Position right div over the left in mobile view

This may serve as a quick fix:

@media screen and (max-width:480px){
    .main {
        display: flex;
        flex-direction: column-reverse;
    }
}

Note:

You may have to use other flex related css props too to align and justify the content with in the div props like justify-content and align-items.

But if you have many div elements, all of them will be reversed.

div-n
...
div-2
div-1

You can achieve this by using flex box! Change Your css to this:

.main{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
}

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

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

@media screen and (min-width:1152px){
  .main {
      justify-content: space-between;
  }

  .left {
      order:2;
  }

  .right {
      order:1;
  }
}

order property determines which element stacks first. You can read more about flex box here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/