Angular Flex Layout: Responsive layout combining row and column

Question

Im learning flex-layout, and I'm trying to create a responsive UI. I have years of experience with bootstrap grid system, but I can't seem to understand how to accomplish the following (live demo):

On large monitors:

On medium monitors:

On mobile:

If I understand it correctly, I have to use a combination of rows and columns, like the below code

    <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
      <div fxFlex="25%"> ..code left out..</div>
   </div>

On small screen, the layout changes from row to column, meaning I have implemented the UI examples above for large and mobile monitors.

Question: How can I implement the UI for medium monitors (see above picture)? I cant understand how to combine row and column

Answer 1

I would minimize your code by looping over the array of items. And I changed the transition from md to sm instead of going to straight to xs, but its your preference. I am subtracting layout gap as well (-0.5%).

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
 <ng-container *ngFor="let item of items">
    <li
      fxFlex="0 1 calc(25% - 0.5%)"
      fxFlex.lt-md="0 1 calc(50% - 0.5%)"
      fxFlex.lt-sm="100%">
   </li>
</ng-container>
   </div>