The basic page layout of Q2A is like this:
<div class="qa-body-wrapper">
<div class="qa-header">...</div>
<div class="qa-sidepanel">...</div>
<div class="qa-main">...</div>
<div class="qa-footer">...</div>
</div>
so you should be able to re-arrange the blocks by using a flexbox layout in your theme's stylesheet:
.qa-body-wrapper {
display: flex;
flex-direction: column;
}
.qa-header {
order: 1;
}
.qa-sidepanel {
order: 3;
}
.qa-main {
order: 2;
}
.qa-footer {
order: 3;
}
Elements will be displayed in the given order (lowest number first), and elements with the same order value will be displayed in the order of their occurrence (meaning the footer in the above example will be displayed after the sidepanel, even though both elements have the same order value).
Restrict these styles to mobile devices by wrapping them in a media query:
@media only screen and (max-width: 600px) {
...
}
Beware that further adjustments, e.g. to element widths, may be required.
