I need to make sidebar 1 and 2 stack on top of each other on large tablets (768 to 1024) since they are very narrow at this point. How to?

You need to change the tablet max-width in the responsive tab in the template settings to the point you want them to collapse eg 1024 and then specify stack for those positions in the layout tool. This will change the tablet width for all of the other options but it may or may not be an issue depending on how you are using the template.

Thanks

It is not possible to specify stack for those positions in the layout tool. The stack applies to Maincontent as well. I need two columns: Maincontent and sidebar1 stacked above sidebar2 on tablets.

Right sorry I misunderstood.

You will need custom css like this:

@media screen and (max-width:787px) {
div.sidebar {width:48%;margin:0}
}

Change the 787px to your tablet width.
You may need to add !important width and margin.
Thanks

Thanks but that does not work. Now sidebar-2 slips below the main content if main is shorter than sidebar-1. And there is no margin between main and the sidebars.

Do you have a link for the site with the code suggested by Anthony?

Cheers
Paul

cleanpekorashared.digitalelernumgebung.de/index.php?option=com_content&view=article&id=1&Itemid=102&lang=de

Sorry I was delayed in coming back here. Now I understand what you need but it's not possible at this stage. You can of course add your own custom css to handle this. Depending on the layout you may need to tweak various push pull classes and make changes to the layout to ensure that the midcol forces the sidebar into position.

I do think this is a much more usuable solution to how multiple sidebars operate on the small screens so I will add this to the framework at this stage, but as you know, I am making my way through other changes and will have to make this addition a part of the next round of updates.