main.vue

<template>
  <section id="content">
    <!-- Vowels and video player -->
    <Vowels id="vowels"
            v-bind:class="{'toggle-hide': hidden}" 
            @letter-changed="letterChanged"
            @header-clicked="switchTable"/>

    <!-- Consonants and navigation -->
    <Consonants id="consonants"
                v-bind:class="{'toggle-hide': !hidden}"
                @letter-changed="letterChanged"
                @header-clicked="switchTable"/>
    
    <Video id="video" 
          ref="video"/>

    <section id="navigation"
            v-if="selectedLetter">
      <NavigateTo  :text="`${$t('letter-actions.go-to-example')} ${selectedLetter.letter.Letter}`"
                   :link="`/info/${selectedLetter.letter.Letter}`"/>
      <NavigateTo  :text="`Til`"
                   :link="`//dansk.nu`"/>
    </section>
  </section>
</template>

<style lang="scss" scoped>
@import "@/styles/mobile.scss";
#navigation {
  display: flex;

  :first-child {
    margin-right: 10px; 
  }
}

// Desktop and big screens
@media only screen and (min-width: $mobile-screen) {
  #content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 1000px; // This will keep the 2 column layout
    justify-content: flex-start;
    
    #vowels {
      order: 1;
      width: 30%;
    }

    #consonants {
      order: 2;
      width: 60%;
    }

    #video {
      order: 1;
      width: 30%;
    }

    #navigation {
      margin-top: 20px;
      order: 2;
      width: 50%;
    }
  }
}

// Mobiles and small screens
@media only screen and (max-width: $mobile-screen) {
  #content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr .1fr 1fr;
    grid-template-areas: "tables"
                        "navigation"
                        "video"
  }
  
  #video {
    grid-area:video; 
  }
  #navigation {
    grid-area:navigation; 
  }

  #vowels, #consonants {
    grid-area:tables; 
  }

  .toggle-hide {
     display: none !important;
  }
}

</style>