Hi,
I assume you are using this website builder (which I have not heard of before) and it seems to me that those templates are already responsive and device agnostic out of the box.
If you are using a website builder then it is best not to mess around with the structure too much otherwise it becomes pointless as you could write your own instead. There is a lot of advanced stuff going on in that website builder and unless you are expert at manipulating css then you will soon run into problems.
The first thing I notice about your page is that you have double scrollbars on the viewport which is a big no no from the start. It is caused by this rule:
.container {
min-height: 100vh;
margin: 20px;
}
If an element is 100% the height of the viewport and it also has 20px top and bottom margins then it will be 100% + 40px tall which is too big to fit in any container and thus causing the double scrollbars. It is unlikely you need the min-height in that rule at all and even if you do you will need to be careful how you use it and control it on smaller screens.
This smells a bit of magic numbers and should be avoided at all costs. What if someone has resize their text and then the 200px will not be enough to make room?
What you need to do is make it automatic instead.
You have a fixed left navigation on wide screens which is fine but at smaller screens you should put the navigation back in the flow and remove the fixed positioning with media queries at an appropriate viewport width. This means that you don’t then need to move the content at all and it will sit underneath without needing any positioning at all.
As far as the width goes on smaller screens then you only have text content so you don’t need any widths. You can set the left and right gutters with margins or padding on the container. The text will wrap automatically as required.
In your viewport meta tag you have this rule.
user-scalable=no
That disrespects your users and unless you are building an app or a specific control that shouldn’t be resized I would remove that from the meta tag as the first thing I do on mobile is to pinch and zoom because even with glasses I find mobile screens hard to read. I realise that rule may be left over from the website builder but its generally a bad rule 
Also be aware that fixed elements must never go out of the viewport because they can’t be accessed by a scrollbar (unless the fixed element is tied to the viewports dimensions and has its own scrollbar). For this reason you need to make sure that on smaller widths and heights that your fixed content is still accessible. It is best to remove fixed positioning on smaller screens or at smaller heights using media queries.[quote=“mail280, post:1, topic:246602”]
Could anyone help me with this? I’ve experimented with flex and columns
[/quote]
Not sure why you need something so advanced. Just remove the fixed positioning with media queries at around 800px width and then the content will sit as one column (with a few other minor tweaks).
Of course in some instances you may be fighting the website builder code which seems to have a lot of default stuff in place which brings me back to my first point of not trying to change the structure too much to start with unless you are experienced enough in over-riding all the extra code.
Try to keep things simple and do one step at a time.
I forgot to mention that your website builder is also adding a lot of things dynamically with js at certain breakpoints and that could soon become very difficult to manage if you stray a long way from the template.
