By using CSS order property it is possible.
#container {
display: flex;
flex-direction: column;
text-align: center;
}
.sidebar-right,
.sidebar-left,
.sidebar-middle {
width: 100%;
}
.sidebar-right {
order: 1;
}
.sidebar-left {
order: 3;
}
.sidebar-middle {
order: 2;
}<div id="container">
<div class="sidebar-right">One</div>
<div class="sidebar-left">Two</div>
<div class="sidebar-middle">Three</div>
</div>For larger displays, you can use media quires. For example, if the device width is greater than 1024 means you can set the flex-direction: unset;
#container {
display: flex;
flex-direction: column;
}
.sidebar-right,
.sidebar-left,
.sidebar-middle {
width: 33.33%;
float: left;
}
.sidebar-right {
order: 1;
}
.sidebar-left {
order: 3;
}
.sidebar-middle {
order: 2;
}
@media screen and (min-width: 1024px) {
#container {
flex-direction: unset;
}
}<div id="container">
<div class="sidebar-right">One</div>
<div class="sidebar-left">Two</div>
<div class="sidebar-middle">Three</div>
</div>