Html 使用Flex Box将列移动到下一行

我有三列，顺序是1，2，3

HTML

<div class="flex-container">
    <div class="item first">1</div>
    <div class="item second">2</div>
    <div class="item third">3</div>
</div>

当我切换到移动屏幕列时，我想要的应该是这样显示的

1 3
2 

媒体查询

/* Too narrow to support three columns */
 @media all and (max-width: 640px) {
    .second {
        order: 3;
        /* And go to second line */
    }
    .third {
        order: 2;
    }
}

第二列应移到下一行

---

如何执行此操作？

默认情况下，

弹性方向

是

行

，您应该将其更改为

列

，并使用

弹性换行：换行

（我们可以使用

弹性换行：列换行

很快编写）。请注意，要使第三列跳转到下一列，

.flex容器

的高度应足够大，以容纳所有的

。第一列

和

。第二列

，但不足以容纳所有3项。这样，您就可以认识到

.third

扩展/扩展了整个空间（在第二列上）。因此，您可以尝试设置其

flex-grow:0

并使用

flex-basis:50%

。代码如下：

@media all and (max-width: 640px) {
  .flex-container {
    flex-flow:column wrap;  
    height:40px;   
  }    
  .third {
    flex-grow:0;
    flex-basis:50%;
  }
}

这里是另一个使用列框布局而不是flex-box的解决方案，它确实非常有效

---

不适合我。也许有些属性被改变了

@media all and (max-width: 640px) {
  .flex-container {
    flex-flow:column wrap;  
    height:40px;   
  }    
  .third {
    flex-grow:0;
    flex-basis:50%;
  }
}