Different layouts for phone and tablet (1 | 2 columns)

I am trying to have a different layout during runtime depending of the hot device phone or tablet.

I'd like to have a 2 columns layout on a tablet and keep a one column layout on a phone.

I'd like also to have some controls to span on 2 columns when on table device, while on phone device the layout should be single column, I mean with many elements to show (3/4 full page height...).

Expected layout:

You can achieve it by taking advantage of OnIdiom, here is a sample in xaml: (note also the new simplified syntax for ColumnDefinitions and RowDefinitions)

<Grid RowDefinitions="*,*,*,*,*,*,*,auto"
      ColumnDefinitions="50*,50*">

<BoxView BackgroundColor="Red"
             Grid.Row="0"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="YellowGreen"
             Grid.Row="1"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Aqua"
             Grid.Row="{OnIdiom Phone=2,
                                Tablet=1}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Bisque"
             Grid.Row="{OnIdiom Phone=3,
                                Tablet=2}"
             Grid.Column="0"
             Grid.ColumnSpan="2"/>

    <BoxView BackgroundColor="Purple"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="Blue"
             Grid.Row="{OnIdiom Phone=4,
                                Tablet=3}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="DimGray"
             Grid.Row="{OnIdiom Phone=6,
                                Tablet=4}"
             Grid.Column="0"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>

    <BoxView BackgroundColor="HotPink"
             Grid.Row="{OnIdiom Phone=7,
                                Tablet=4}"
             Grid.Column="{OnIdiom Phone=0,
                                   Tablet=1}"
             Grid.ColumnSpan="{OnIdiom Phone=2,
                                       Tablet=1}"/>
</Grid>

Phone

Tablet