angular flex layout grid system

Question

Click to view attacted image

I want to make screen like the attached image, but getting some issue. My code is working fine for Small devices and Large devices, but for Medium devices it's not working fine. So can anyone look into my code and help me to solve this issue. Actually, I am little confused with Flex layout grid system. It's very easy to achieve this in Bootstrap, but I want same in Flex Layout.

    <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.lg="start center"
     fxLayoutAlign.xs="center center" fxLayoutAlign.sm="center center">

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" fxLayout.md="row"
       class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

</div>

Answer 1

<div fxLayout="row" fxLayout.lt-md="column"  fxLayoutGap="10px">
        <div fxLayout.gt-md="row" fxLayout.lt-sm="column"  fxLayoutGap="10px" fxFlex="100"  fxFlex.gt-md="50">
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >1</div>
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >2</div>
        </div>
        <div fxLayout.gt-md="row" fxLayout.lt-sm="column" fxLayoutGap="10px" fxFlex="100"   fxFlex.gt-md="50">
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >3</div>
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >4</div>
        </div>
      </div>