title: CSS Rotate Flex Layout 90 degrees on Mobile
body: <p>I am trying to get a responsive layout that on the desktop looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/uFaN4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFaN4.png" alt="enter image description here"></a></p>
  
  <p>and on mobile looks basically like the 90-degree rotation of that:</p>
  
  <p><a href="https://i.stack.imgur.com/FABJ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FABJ6.png" alt="enter image description here"></a></p>
  
  <p>I have got the desktop working, and the mobile version nearly working, but my approach to the mobile version feels wrong. It feels like a 'redo' turning off flex and using floats instead. When really I just want to turn my "rows" into "columns" but I have tried and failed using combinations of width and flow direction that I took from here:
  <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>
  
  <p>Also I have a secondary problem, this HTML is 'responsive' when I <strong>resize</strong> the screen but it doesn't work when I use chrome to <strong>emulate</strong> mobile devices!</p>
  
  <p>In short, I'm getting confused and feeling I'm doing it all wrong! What would be the correct approach? </p>
  
  <p>This is my current code:</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>body {
    display: flex;
  }
  
  .game-area {
    padding-top: 24px;
    padding-left: 54px;
    width: 1156px;
    /*display: flex;
      flex-direction: row;*/
    margin: auto;
    background-color: #27332F;
  }
  
  .tile {
    float: left;
    height: 100px;
    width: 100px;
    margin-left: 20px;
    text-align: center;
    vertical-align: middle;
    background-color: orange;
    color: white;
  }
  
  .row {
    display: flex;
    width: 100%;
    clear: left;
    padding: 5px;
    justify-content: space-evenly;
  }
  
  #highest {
    float: left;
  }
  
  #lowest {
    float: right;
  }
  
  @media screen and (max-width: 1200px) {
    .game-area {
      width: 1156px;
    }
    .tile {
      margin-left: 20px;
    }
  }
  
  @media screen and (max-width: 960px) {
    .game-area {
      width: 916px;
    }
  }
  
  @media screen and (max-width: 768px) {
    .game-area {
      width: 724px;
    }
  }
  
  @media screen and (max-width: 600px) {
    .game-area {
      width: 556px;
    }
  }
  
  @media screen and (max-width: 420px) {
    .game-area {
      padding-left: 15px;
      padding-top: 27px;
    }
    .row {
      width: 33%;
      display: block;
      clear: none;
      float: left;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .tile {
      float: none;
      height: 50px;
      font-size: 8pt;
    }
  }
  
  @media screen and (max-width: 320px) {
    .game-area {
      width: 290px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width"&gt;
  &lt;div class="game-area" id="game-area-div"&gt;
  
    &lt;div id="number-row" class="row"&gt;
      &lt;div class="tile"&gt;1&lt;/div&gt;
      &lt;div class="tile"&gt;2&lt;/div&gt;
      &lt;div class="tile"&gt;3&lt;/div&gt;
      &lt;div class="tile"&gt;4&lt;/div&gt;
      &lt;div class="tile"&gt;5&lt;/div&gt;
      &lt;div class="tile"&gt;6&lt;/div&gt;
      &lt;div class="tile"&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="answer-row-1" class="row"&gt;
      &lt;div class="tile"&gt;2&lt;/div&gt;
      &lt;div class="tile"&gt;4&lt;/div&gt;
      &lt;div class="tile"&gt;6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="answer-row-2" class="row"&gt;
      &lt;div class="tile"&gt;1&lt;/div&gt;
      &lt;div class="tile"&gt;3&lt;/div&gt;
      &lt;div class="tile"&gt;5&lt;/div&gt;
      &lt;div class="tile"&gt;7&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong>
  Thanks to <a href="https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working">this answer</a> the media tags are now working properly :) using:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width"&gt;
  </code></pre>