Right modules to the top on mobile (responsive) version

Question

I have layout that is like this LEFT - COMPONENT - RIGHT. I have NEWS page where I have my news in COMPONENT area and modules (search, news archive etc) on the right side. When I open my site on mobile my RIGHT modules are at the bottom of the page and actual news at the top. Is there any way to change an order of modules in mobile version of site? So on mobile version my RIGHT modules will be at the top and after them will be my actual news.

Answer 1

It will depend on the specific template you are using, but most likely you will need to update the css and html of your template.
If you have the relevant coding skills, you can do this with an override - see https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager

Some third party templates may have parameters to allow you to make some tweaks to the layout without coding skills, but this is not particularly common. Template parameters are also under the template manager.

Answer 2

It would really help to know which template you are using. But the best way to do this in my opinion is by using FlexBox.

You would need to identify each part in the source code somehow. e.g.

parent container class="container"
LEFT class="left" - COMPONENT class="component" - RIGHT class="right"

Then you can do something like

custom.css

.container {
  display: flex;
}
.left {
  order: 3;
}
.component {
  order: 2;
}
.right {
  order: 1;
}

Here is a useful resource on FlexBox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here is example code working:

https://codepen.io/Balloony/pen/BMjeVL