JSFiddle - React, Tailwind, and code Playground

HTML

<header>header</header>
<nav class="mini">
	<button aria-label="menu">≡</button>
</nav>
<main>
<nav class="maxi">
	<ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
  </ul>
</nav>
<h1>heading</h1>
<p>display: content bewirkt, dass die untergeordneten Elemente eines Elements so angezeigt werden, als wären sie direkte untergeordnete Elemente des übergeordneten Elements des Elements, wobei das Element selbst ignoriert wird. Dies kann nützlich sein, wenn ein Wrapper-Element bei Verwendung eines CSS-Rasters oder ähnlicher Layouttechniken ignoriert werden soll. </p>
</main>

CSS

body {
	margin: 0;
	display: grid;
	grid-template-columns: 3em 1fr;
	background: lightblue;
}

body > * {
	padding: 0 1em;
}

header {
	background: gray;
	grid-column: 1/-1;
}


nav.mini {
	grid-row: 2;
	grid-column: 1;
}

nav.mini button {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 2em;
}

main {
	display: contents;
}

main > * {
	grid-column: 1/-1;
	padding: 0 1em;
}

nav.maxi {
 display: none;
}

h1 {
	margin: 0;
	grid-row: 2;
	grid-column: 2/-1;
}

@media screen and (min-width: 30em) {
  nav.mini {
   display: none;
  }
  
  main {
    display: grid;
    grid-column: 1/-1;
    grid-template-areas:
                         "Navi Rest"
                         "Navi Inhalt";
   }
  
  nav.maxi {
     display: inline-block;
     grid-area: Navi;

  }
  
  nav.maxi ul {
     padding-left: 0;
     list-style-type: none;
     }
     
  h1 {
     grid-area: Rest;
  }
  p {
    grid-area: Inhalt;
  }
}