Estoy tratando de que la columna derecha de un diseño de 3 columnas se mueva debajo de la columna izquierda en pantallas más pequeñas. En este momento, la columna derecha se mueve en la dirección correcta, excepto que se cuelga debajo de la columna central.

Creé esta simulación básica de mi problema. Tenga en cuenta que la columna central siempre será más larga que las columnas izquierda y derecha como se muestra aquí.

<style>
  .container {
    max-width:1280px;
    width:100%;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-wrap: wrap;
  }

  .leftsidebar {
    width:20%;
    height:200px;
    background-color:gray;
    margin-top:15px;
  }

 .middle {
    width:57%;
    background-color:blue;
    margin-left:15px;
    margin-right:15px;
    height:800px;
    margin-top:15px;
  }

 .rightsidebar {
    width:20%;
    background-color:orange;
    height:200px;
    margin-top:15px;
  }
</style>

<div class="container">
  <div class="leftsidebar">left</div>
  <div class="middle">middle</div>
  <div class="rightsidebar">right</div>
</div>