How to separate menu and content in the same page

I have a list of menu items and content in a single page. In PC browser or ipad, I want to see both parts in the same page. But in the smaller devices such as iphone and android phone, I want to separate the two so that you selects one of menu items in a page and see its content when he clicks it.

Jquery mobile demo page already does it. But I can't figure o开发者_如何转开发ut how I can achieve it. Can someone explain or point to any good reference? Thanks

You may take a look at the following blog post which illustrates how you could organize your views so that based on the client type you could provide different contents.