html - CSS 在移动设备上将 Flex 布局旋转 90 度

Question

我正在尝试获得桌面上的响应式布局:

在移动设备上看起来基本上像是旋转了 90 度:

我已经让桌面版正常运行，移动版也差不多可以正常运行，但我对移动版的处理方式感觉不对。感觉就像是“重做”，关闭 flex 并改用 float 。当我真的只想将我的“行”变成“列”时，但我尝试并失败了使用我从这里获取的宽度和流向的组合: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我还有一个次要问题，当我调整屏幕大小时，此 HTML 是“响应式”的，但当我使用 chrome 来模拟 移动设备时它不起作用!

简而言之，我感到困惑，觉得自己做错了!什么是正确的方法？

这是我当前的代码:

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;
  }
}

<meta name="viewport" content="width=device-width">
<div class="game-area" id="game-area-div">

  <div id="number-row" class="row">
    <div class="tile">1</div>
    <div class="tile">2</div>
    <div class="tile">3</div>
    <div class="tile">4</div>
    <div class="tile">5</div>
    <div class="tile">6</div>
    <div class="tile">7</div>
  </div>
  <div id="answer-row-1" class="row">
    <div class="tile">2</div>
    <div class="tile">4</div>
    <div class="tile">6</div>
  </div>
  <div id="answer-row-2" class="row">
    <div class="tile">1</div>
    <div class="tile">3</div>
    <div class="tile">5</div>
    <div class="tile">7</div>
  </div>
</div>

更新感谢this answer媒体标签现在可以正常工作 :) 使用:

<meta name="viewport" content="width=device-width">

Answer 1

这可以使用 flexbox 来完成，只需将 flex-direction 设置为 column。

.wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 25px;
}

.wrap--mobile {
  flex-direction: column;
  float: left;
  width: 50px;
  height: 400px;
  margin-right: 25px;
}

.block {
  width: 50px;
  height: 50px;
  background-color: red;
}

<!-- Horizontal layout !-->
<div class="wrap">
  <div class="block">1</div>
  <div class="block">2</div>
</div>

<div class="wrap">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

<div class="wrap">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

<hr>

<!-- Vertical layout !-->
<div class="wrap wrap--mobile">
  <div class="block">1</div>
  <div class="block">2</div>
</div>

<div class="wrap wrap--mobile">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

<div class="wrap wrap--mobile">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>

希望这对您有所帮助。