I am building a web page that's part of a contacts system. The page enables the user to search for a contact and after finding a contact they can view and edit that contacts details in the web page.
The page consists of a number of tables that I want to control using HTML 5 and CSS 3. In full screen mode (e.g. on a desktop machine) there are up to 4 tables across the page. I need the page to convert to a single, narrow column of tables when the screen width gets narrower (e.g. when on a mobile phone).
I've attached 2 screen shots. The first shows the page in full screen mode:
