how to set multiple Grids vertically like Bootsrap in a universal app - win-universal-app

Question

I have this architecture in my project and I try to make it responsive,
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="49" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2">
</Grid>
<Grid Grid.Row="1" Grid.Column="0">
</Grid>
<Grid Grid.Row="2" Grid.Column="0">
</Grid>
<Grid Grid.Column="1" Grid.Row="1">
</Grid>
<Grid Grid.Column="1" Grid.Row="2">
</Grid>
</Grid>
I have used a trigger and a StackPanel to change the orientation from horizontal to vertical when I resize the Screen but it doesn't work :(
any good solution please to do somthing like we do it bootsrap :)
thanks for help

Answer 1

Since OP doesnt have code for triggers. Have a look at Channel 9 video of Hero Explorer by Bob Tabor. Here he handles a similar scenario of cahnging layout from vertical to horizontal with video and code you will get the basic idea on how to handle trigger.
Following is the code from HeroExplorer to handle resizing, similary you can do that in your code also
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailGrid.(Grid.Row)" Value="0" />
<Setter Target="DetailGrid.(Grid.Column)" Value="1" />
<Setter Target="ColumnOne.Width" Value="Auto" />
<Setter Target="ColumnTwo.Width" Value="*" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="DetailGrid.(Grid.Row)" Value="1" />
<Setter Target="DetailGrid.(Grid.Column)" Value="0" />
<Setter Target="ColumnOne.Width" Value="*" />
<Setter Target="ColumnTwo.Width" Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnOne" Width="Auto" />
<ColumnDefinition x:Name="ColumnTwo" Width="*" />
</Grid.ColumnDefinitions>
<!-- Detail Grid -->
<Grid Name="DetailGrid" Grid.Column="1" Grid.Row="0" Margin="10,0,10,0">