Angular material responsive layout from columns into tabs

I would like to have a responsive design for my angular application using angular material.

My page should have 3 columns on desktop that should be grouped into 3 tabs when on mobile.

I was able to do this but had to duplicate the components and @if them out depending on the available width. This leads to extra maintenance and possible issues, like updating the desktop instance and forgetting to do the same for the mobile.

Is there a way to achieve this without too much code duplication?

Here is a sketch if I wasn't clear on the layout

Separate the layout concern into its own component:

import { Component, signal } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';

@Component({
  selector: 'app-responsive-layout',
  imports: [MatTabsModule],
  template: `
    @if (isMobile()) {
      <mat-tab-group>
        <mat-tab label="Tab 1">
          <ng-container *ngTemplateOutlet="section1" />
        </mat-tab>
        <mat-tab label="Tab 2">
          <ng-container *ngTemplateOutlet="section2" />
        </mat-tab>
        <mat-tab label="Tab 3">
          <ng-container *ngTemplateOutlet="section3" />
        </mat-tab>
      </mat-tab-group>
    } @else {
      <div class="columns-collection">
        <div class="column">
          <ng-container *ngTemplateOutlet="section1" />
        </div>
        <div class="column">
          <ng-container *ngTemplateOutlet="section2" />
        </div>
        <div class="column">
          <ng-container *ngTemplateOutlet="section3" />
        </div>
      </div>
    }
    
    <ng-template #section1>
      <ng-content select="[data-section-1]" />
    </ng-template>
    <ng-template #section2>
      <ng-content select="[data-section-2]" />
    </ng-template>
    <ng-template #section3>
      <ng-content select="[data-section-3]" />
    </ng-template>
  `,
  styles: `
    .column-collection {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .column {
      display: flex;
      flex-direction: column;
    }
  `,
})
export class ResponsiveLayoutComponent {

  // TODO: update when on a mobile device
  protected readonly isMobile = signal(false);
}

Then content project into the layout component:

<app-responsive-layout>
  <app-component-1 data-section-1=""></app-component-1>
  <app-component-2 data-section-2=""></app-component-2>
  <app-component-3 data-section-3=""></app-component-3>
</app-responsive-layout>

I'm using the data-* attribute for selecting which component goes into which column/tab, but you can use any valid CSS selector (including the selector of your component).

If you don't already have a way to determine if you're on a mobile device, you can use something like the Layout package from the Angular Material CDK.