Flex订单无法按预期工作

Question

我有一个带有3个子div的nav元素，宽度分别为25％，50％和25％，也分别是flexbox 1,2和3。在移动视图中，我想将第二个元素向下移动到下一行，获取全宽，第一个和第三个移动到第一行，每个占用50％的宽度。我将第二个元素的顺序更改为3和宽度100％，第三个元素的顺序更改为2和50％宽度。但是，它仍然没有按预期工作。是否有可能使用flexbox实现类似的功能？
我已经包含了示例代码

<nav>
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
</nav>

和CSS

nav{
  display:flex;
  flex-direction:row;
}
.a,.b,.c{
  border:1px solid blue;
  text-align: center;
}
.a{
  width:25%;
  order:1;
}
.b{
  width:50%;
  order:2;
}
.c{
  width:25%;
  order:3;
}

@media screen and (max-width: 400px){

  .a{
    width:50%;
  }
  .b{
    width:100%;
    order:3;
  }
  .c{
    width:50%;
    order:2;
  }
}

或使用fiddle
基本上这就是我想要实现的目标。
默认视图

在移动设备上

Answer 1

您需要在弹性容器上设置flex-wrap: wrap，然后您只需更改移动设备尺寸的顺序，并在flex: 0 0 100%元素上设置b。 Demo

nav {
  display: flex;
  flex-wrap: wrap;
}
.a, .b, .c {
  border: 1px solid blue;
  text-align: center;
}
.a, .c {
  flex: 1;
}
.b {
  flex: 2;
}

@media screen and (max-width: 400px) {
  .b {
    order: 2;
    flex: 0 0 100%;
  }
}

<nav>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</nav>

Answer 2

我更新了你的小提琴：https://jsfiddle.net/s9v926g9/1/

您需要添加两件事：

将flex-wrap: wrap;添加到导航元素

这将使元素换行到下一行，而不是在可用宽度上将它们自行隔开。

设置框大小调整

添加

*{
  box-sizing: border-box;
}

到你的css将确保边框没有弄乱你的flex-wrap。