feat: add option to reverse order on specific breakpoints to FluentStack/FluentGrid

[MarvinKlein1508]

🙋 Feature Request

I was thinking about reasons why I am not using the FluentStack and FluentGrid components so much. And one of them is that I cannot control the order behaviour of the columns for other devices.

On desktop for example I have this view:

On mobile I would like to have the filter area to be displayed first:

In Bootstrap this can be achieved by providing order-* parameters:

I would love to be able to have some similiar feature like this for the fluent variants as well.

[rpodevns]

This sample doesn't provide the variants you're looking for but accomplishes something similar with FluentGrid using minimal css. Haven't look at FluentStack.

<FluentGrid>
    <FluentGridItem xs="12" sm="12" lg="3" class="sidebar">
        <div class="card">
            Sidebar (Appears first on small screens, right on large screens)
        </div>
    </FluentGridItem>

    <FluentGridItem xs="12" sm="12" lg="9" class="content">
        <div class="card">
            Main Content (Appears second on small screens, left on large screens)
        </div>
    </FluentGridItem>

</FluentGrid>

<style>
    .sidebar { order: 1; }
    .content { order: 2; }

    @@media (min-width: 960px) {
        .fluent-grid { flex-wrap: nowrap!important; }
        .sidebar { order: 2; }
        .content { order: 1; }
    }
</style>

[vnbaaij]

@dvoituron is this something we want to look at for v5 (like the Margin/Padding addition)?

[dvoituron]

In v5, you have now a Reversed parameter: https://fluentui-blazor-v5.azurewebsites.net/Stack