MudBlazor - Blazor Component Library

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.