https://weather.scottsworld.info/index.html
I have been experimenting with flex columns but my old side menu when opened broke it… Took a bit of looking but found a top menu I could adapt and have multiple drop down buttons with different menus. Many have more than one button and only one drop down menu button and when tried drop down with more than one would only show the first drop down items on all of them.
But happy to say I found one that works and changed my menu across my entire site from the side menu that had issues… Still need to get it to wrap better on small screens (menu bottons). I can not post code to the forum but what you are seeing is more less this:
row 1 full width column
row 2 2 split evenly column2 column3
row 3 1 full width column
Which on a computer screen is 2 side by side columns below the top column and between a bottom column. No big deal, but on mobile to third column drops down below the second and becomes a long one column page
row 1 full width column
row 2
column2
column3
row 3 1 full width column
before it was
div
2 column table
div
Way over simplified but if you know html coding you get the idea. the table did not move on mobile an scrolled side ways… One thing i have not figured out, this uses bootstraps grid.css and I found the .row statement easily enough to copy into my style sheet. and the div class columns control the page from bootstrap but no where in the bootstrap code is there a .column statement code , there are lots of .col-x, col-auto, col-sm-x and so on.