After attempting to create a mobile app, I found it was impossible to integrate our "most viewed" content within it, so I could not show people the top trends, making the app pointless. I would like to shift my focus to recreating what I already have to make it compatible with other devices using media queries. I have searched online, however I am struggling to grasp how these can be implemented.
The website in question is: searchbuzz.co
1) I need it to load a single column of data when viewed in a mobile device, and for both the right sidebar and left sidebar to disappear.
2) I need my navigation to move to a new location and load when a certain size screen is loaded. It is already capable of auto collapsing in mobile view, but of course it is currently in the sidebar and I need it moved it to the top so that users can navigate the site. Adding to this, if I could have it as an offset menu, so that it loads off the side of the screen instead of completely taking up the screen of content, that would be great. I see how to create this type of menu, but now how to call it on certain devices using media queries.
3) When I resize my window, the right sidebar is loading before the content. This is because the sidebar is indeed first in the code. By moving this so the content is first, I would be able to load our content, and then the sidebars below it. Whilst this isn't particularly pretty it would solve the issue with the size in between say phones and tablets, or when a window is resized.
Please advise me on how to proceed so I can learn how to implement these in the best way.