בד"כ בשביל רספונסיביות משתמשים ב bootstrap,

ואני אכן משתמש ב bootstrap,

אבל אני רוצה לקבוע ערך ברירת מחדל באלמנטים של material לפי רספונסיביות, כמו בדו' שלהלן.

איך הדרך המקובלת לעשות את זה,

ישנה אפשרות להכפיל אותם ולהסתיר, השאלה האם זו הדרך, א"כ אשמח לקבל דוגמא לכתוב את זה בצורה נקייה,

או שיש דרכים אחרות שהן מקובלות?

<mat-drawer-container class="example-container h-100" >
    <mat-drawer #drawer class="bg-dark" mode="side" >
      <span>greate to menu</span>
    </mat-drawer>
    <mat-drawer-content>
    <mat-toolbar class="navbar sticky-top s_theme p-0 m-0">
        <app-menu-top class="container-fluid m-0 p=0"></app-menu-top>
    </mat-toolbar> 
  
    <div class="container-fluid h-100 s_bode">
  
  <h1>ברוכים הבאים לארגון XXXX - מתנדבים!</h1>
  
  </div>
  <router-outlet></router-outlet> 
    </mat-drawer-content>
  </mat-drawer-container>

למשל בדוגמא הנ"ל:
אני מביא את העיקרי ואת מה שנפתח (מגירה)
ברירת מחדל שמתי את הנפתח פתוח (opened) איך מבטלים את זה כשזה סמרטפון (בbpptstrap = sm)
והmode שווה side איך הופכים ל Over
והhasBackdrop שווה false איך הופכים ל true

תודה לכל המסייעים.