title: Show HTML DIV between two other DIVs
body: <p>I have build with SO help a HTML CSS Grid/Flexbox compbined Layout with quite progress. But now i have a problem with showing an additionall div named class <code>mobile_nav</code>.</p>
  
  <p>It should be activated when the user clicks on <code>SWITCH</code> (i can google this, therefore not part of question) and been displayed between DIV <code>&lt;div class="section site-menu"&gt;</code> and DIV <code>&lt;div class="section site-header"&gt;</code> (this is what i want and which is not working). So better call it as mobile navigation.</p>
  
  <p>Can someone see whats wrong with it?</p>
  
  <p><a href="https://codepen.io/ybog/pen/WZwdaM" rel="nofollow noreferrer">CodePen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .site-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .site-menu {
    background-color: #000;
    color: #fff;
    position: absolute;
    /* padding: 8px 20px 9px; */
    width: 100%;
    z-index: 1;
  }
  
  .hero {
    background-image: url('https://wallpaperbrowse.com/media/images/landscape-mountains-nature-clouds.jpg');
    background-size: cover;
    background-position: center;
    width: 100wh;
    height: 100vh;
    display: flex;
  }
  
  .hero-content {
    background-color: #000;
    color: #fff;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-directon: column;
    margin: auto;
  }
  
  .bottom-right {
    position: absolute;
    right: 0;
    margin-top: -1.2em;
    background: black;
    color: white;
  }
  
  #nav,
  #left_side,
  #top_nav,
  #bottom_nav {
    display: flex;
  }
  
  #nav {
    border-bottom: 1px solid grey;
  }
  
  #title {
    margin-left: 10px;
  }
  
  #menu_switch {
    margin-right: 10px;
  }
  
  #left_side {
    flex-direction: column;
    width: 100%;
  }
  
  #top_nav {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    border-bottom: 1px solid grey;
    align-items: center;
  }
  
  .left {
    margin-right: auto;
  }
  
  #bottom_nav {
    align-items: center;
    height: 38px;
  }
  
  .nav_item {
    padding: 5px;
  }
  
  .nav_item:first-child {
    background-color: red;
    margin-left: 10px;
  }
  
  #logo {
    background-color: black;
    margin-left: 24px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="site-wrapper"&gt;
    &lt;div class="section site-menu"&gt;
      &lt;div id="nav"&gt;
        &lt;div id="logo"&gt;
          100x100px Logo
        &lt;/div&gt;
        &lt;div id="left_side"&gt;
          &lt;div id="top_nav"&gt;
            &lt;div id="title" class="nav_item left"&gt;TITLE OF PAGE&lt;/div&gt;
            &lt;div id="menu_about" class="nav_item right"&gt;ABOUT&lt;/div&gt;
            &lt;div id="menu_signup" class="nav_item right"&gt;SIGN UP&lt;/div&gt;
            &lt;div id="menu_follow" class="right nav_item"&gt;FOLLOW&lt;/div&gt;
            &lt;div id="menu_switch" class="right nav_item"&gt;SWITCH&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="bottom_nav"&gt;
            &lt;div class="nav_item"&gt;AZURE&lt;/div&gt;
            &lt;div class="nav_item"&gt;SHAREPOINT&lt;/div&gt;
            &lt;div class="nav_item"&gt;BI &amp; DWH&lt;/div&gt;
            &lt;div class="nav_item"&gt;.NET DEVELOPMENT&lt;/div&gt;
            &lt;div class="nav_item"&gt;MOBILE DEVELOPMENT&lt;/div&gt;
            &lt;div class="nav_item"&gt;WORDPRESS&lt;/div&gt;
            &lt;div class="nav_item"&gt;NOTES&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section mobile_nav"&gt;
      &lt;div&gt;dlfdh afj hdslf&lt;/div&gt;
      &lt;div&gt;bla bla bla&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section site-header"&gt;
      &lt;div class="hero"&gt;
        &lt;div class="hero-content"&gt;
          &lt;h1&gt;If you can dream it, you can do it...&lt;/h1&gt;
          &lt;p class="subhead"&gt;lets do it !&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bottom-right"&gt;
        &lt;span&gt;This text should be positioned at the bottom right of the Hero Image&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section undefined"&gt;
      &lt;div class="undefined-content"&gt;
        &lt;p&gt;Lots of content will go in here&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="section site-footer"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>