How to get columns 1 and 2 displayed after central content in Plone 5 on mobile phone?
You have to adjust the order of the HTML. I usually place the content column first, and then the portlet columns, if available. With some CSS you can then place the columns on larger screens in a 3 column layout, and on mobile they are already in the correct order.
See https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/index.html#L62 for the template changes and https://github.com/it-spirit/plonetheme.barcelonetang/blob/master/src/plonetheme/barcelonetang/theme/rules/content.xml for the corresponding diazo rules. Here the Twitter Bootstrap classes for pushing and pulling grid columns around are used. (So if you are using the default Plone theme then you can use https://pypi.org/project/plonetheme.barcelonetang instead which already gives you this and some more enhancements.)
Another solution would be to use CSS Grid. I currently don't have code for a Plone theme I'm allowed to share.