I have a lazy module which I want a different experience for desktop and mobile device. Basically I want my desktop layout like:
[![Desktop layout](https://i.stack.imgur.com/whGqB.png)](https://i.stack.imgur.com/whGqB.png)

Component1 display a list, user chooses an item on the list and component2 will display the details. I created router-outlet named 'side' to display as a sidebar. Here's is the router config:

```
const desktop_routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        component: ListComponent,
        outlet: 'side'
      },
      {
        path: '',
        redirectTo: 'detail',
        pathMatch: 'full'
      },
      {
        path: 'detail',
        component: DetailComponent,
      }
    ]
  }

```

In mobile layout, I want Component1 as the content of path: '', user choose any time from the list will be lead to detail page (2 separate page): 
[![enter image description here](https://i.stack.imgur.com/cFPnK.png)](https://i.stack.imgur.com/cFPnK.png)

How can I do it?