MVVM viewmodel to view correlation in adaptive UI

I am making an mvvm application for the uwp platform and I am looking for advice on the following matter.

Take for example the windows 10 e-mail application, which when full screen displays both the e-mail list and e-mail content in one page, while in smaller form factors the content is displayed in separate pages.

What is the best way to correlate views with viewmodels in this scenario?

My thoughts are

  1. A big view model which will be the data context for all the views in this scenario.

  2. Two view models, one for the e-mail list and one for the e-mail content, set as the data context for different parts of the page or different pages.

  3. Three view models. The two view models from the previous point and another one to coordinate them.

What do you think is best? My problem mostly stems from the fact that in one case you actually navigate to another page, and have to put logic in navigation events that don’t exist in the other case.