Simple 3 elements website layout, but seems impossible to me

Question

I am trying to achieve a simple website layout with only 3 basic elements, but somehow can not make them work. I will be needing the layout work in 3 resolutions:

1. Mobile
2. Tablet
3. Desktop

and the layout itself seems impossible for the resolutions.

Here is a picture of the elements and resolutions:

Elements explained:

1. Header (not fixed height)
2. Main content
3. Right sidebar (fixed width)

I am using flexbox for the elements in all the resolutions and also I am wrapping them in a main container.
I am stuck getting the desktop resolution working. Where am I going wrong?

Here is a Codepen.

<div id="container">
  <div class="el-1"><span>1<span></div>
  <div class="el-2"><span>2<span></div>
  <div class="el-3"><span>3<span></div>
</div>

/* mobile */
#container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.el-1 {
  order: 0;
  flex: 1 0 100%;
  background: red;
}
.el-2 {
  order: 1;
  flex: 1;
  background: green;
}
.el-3 {
  order: 2;
  background: blue;
}
/* tablets */
@media (min-width: 681px)  {
  #container {
    flex-direction: row;
  }
  .el-2 {
    order: 1;
  }
  .el-3 {
    order: 2;
    flex: 0 0 300px;
  }
}
/* desktops */
@media (min-width: 1025px)  {
  /* help */
}

I am not sure if combining some of the elements in a wrap element will work. Every time I try to combine any 2 elements in a wrap, it seems to be impossible for some of the resolutons.

EDIT: I found the answer

    /* desktops */
    @media (min-width: 1025px)  {
      #container {
        position: relative;
      }
      .el-1, .el-2 {
        max-width: calc(100% - 300px);
      }
      .el-3 {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
      }
    }

Answer 1

I think a better implementation of the layout would be using CSS Grid Areas as in the snippet below.

#container {
    display: grid;
    width: 100vw;
    height: 100vh;
}

#container div {
    width: 100%;
    border: 1px solid black;
}

.el-1 {
    grid-area: el1;
    background: #b0b8ff;
}

.el-2 {
    grid-area: el2;
    background: #b0ffe5;
}

.el-3 {
    grid-area: el3;
    background: #fffab0;
}

/* mobile */
@media (min-width: 10px) {
    #container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 4fr 2fr;
        grid-template-areas:
            'el1'
            'el2'
            'el3';
    }
}
/* tablet */
@media (min-width: 600px) {
    #container {
        grid-template-columns: 5fr 2fr;
        grid-template-rows: 1fr 6fr;
        grid-template-areas:
            'el1 el1'
            'el2 el3';
    }
}
/* desktop */
@media (min-width: 1000px) {
    #container {
        grid-template-columns: 5fr 2fr;
        grid-template-areas:
            'el1 el3'
            'el2 el3';
    }
}

<div id="container">
  <div class="el-1"><span>1<span></div>
  <div class="el-2"><span>2<span></div>
  <div class="el-3"><span>3<span></div>
</div>

Let me know if the solution did help. I might be a better alternative. Thank you!