Order

Utilities for controlling the order of flex and grid items.

Class Properties
order-0 order: 0;
order-1 order: 1;
order-10 order: 10;
order-11 order: 11;
order-12 order: 12;
order-2 order: 2;
order-3 order: 3;
order-4 order: 4;
order-5 order: 5;
order-6 order: 6;
order-7 order: 7;
order-8 order: 8;
order-9 order: 9;
order-first order: -9999;
order-last order: 9999;
Basic Usage
Order
01
02
03
<div class="d-flex gap-2">
    <MudAvatar Class="order-3" Size="Size.Large" Color="Color.Primary" Rounded="true">01</MudAvatar>
    <MudAvatar Class="order-2" Size="Size.Large" Color="Color.Primary" Rounded="true">02</MudAvatar>
    <MudAvatar Class="order-1" Size="Size.Large" Color="Color.Primary" Rounded="true">03</MudAvatar>
</div>
Applying conditionally
Breakpoints

You can use the utility class to target media queries like responsive breakpoints. For example, use order-md-2 to apply the order-2 utility at only medium screen sizes and above.

<div class="...order-md-2">
  ...
</div>

To learn more, check out the documentation on Breakpoints and other modifiers you can use.

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙