* {
 box-sizing: border-box;
}

x-mainbox {
 display: flex;
 flex-direction: column;
 border: solid 1px grey;
}

.xpanel {
 width: 200px;
 flex-shrink: 0;
 border: solid 1px pink;
 padding: 1rem;
 overflow-y: auto;
}

.xmain {
 flex: 1;
 padding: 1rem;
 overflow-y: auto;
 border: solid 1px blue;
}

@media (min-width: 701px) {
 x-mainbox {
  flex-direction: row-reverse;
 }

 body {
  background-color: silver;
 }
}