Relatively new to front-end design, I know how to hide/show elements via media-queries in CSS. But looking at other sites I came across this one: http://www.flooringsupplies.co.uk/ and elements such as the <header> completely change their structure based of what seems to be the device-width.
My question is how can this be done?
I am using Joomla for my website and would want to load one module for smaller screens (for a menu) and different one for anything bigger. I don't want to just hide the relevant menu.
Does it have to be done with jQuery or another server end language?
Sorry if it's an obvious solution, a very difficult one, or isn't even necessary for me.
The website I am working on is http://www.flooringsales.co.uk/, it is very simple and not the best I know.
We are aiming to keep the current mega menu module for desktop, then have an acordian side menu module for tablet/mobile.