When narrowing the screen, the cards do not change the number of rows

Question

In general, I have cards that by default have four rows. And I want to make the number of rows in the version for tablets decrease to 2, and in the mobile version to 1. But in the end, only displayed in 4 and in 1 row.

What am I doing wrong?

<div fxLayout="row" fxLayout.xs="column">
    <div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
        <mat-card>
        </mat-card>
    </div>
    <div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
        <mat-card>
        </mat-card>
    </div>
    <div class="mr10" fxFlex="25" fxFlex.lt-lg="50">
        <mat-card>
        </mat-card>
    </div>
    <div fxFlex="25" fxFlex.lt-lg="50">
        <mat-card>
        </mat-card>
    </div>
</div>

Answer 1

Try like this :Refer

Stackblitz use mat-card instead of message there

   <div fxLayout="row wrap">
        <div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
            <mat-card>
            </mat-card>
        </div>
        <div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
            <mat-card>
            </mat-card>
        </div>
        <div class="mr10" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
            <mat-card>
            </mat-card>
        </div>
        <div fxFlex="25" fxFlex.gt-md="0 1 25" fxFlex.gt-xs="0 1 calc(50% - 10px)" fxFlex="100">
            <mat-card>
            </mat-card>
        </div>
    </div>