没有嵌套div的Flex-wrapping

Question

我正在尝试使用flexbox制作水平卡而不使用嵌套div。

例如，我现在所拥有的是：

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-img {
  width: 37%;
}

.card-content {
  width: 63%;
}

<div class='card'>
  <div class='card-img'>
    <img src='example' />
  </div>
  <div class='card-content'>
    <div class='card-number'>
    </div>
    <div class='card-type'>
    </div>
  </div>
</div>

此布局现在可以使用，但是当视口调整大小时，我希望水平card更改为垂直视图（它已经完成）。不过，我想使用弹性订单重新排序card-img，card-number和card-type。

在使用此类div布局时，如何获得相同的水平布局？

编辑： 抱歉令人困惑的措辞，我的目的是创建一个像图像一样工作的水平布局，除了3个单独的div，而不是2个div，其中1个是嵌套div。遗憾！

Answer 1

＆＃13;

＆＃13;

.card {
  display: flex;
}

.card-img {
  flex: 0 0 37%;
  border: 1px dashed red;
}

.card-number {
  flex: 0 0 30%;
    border: 1px dashed red;
}

.card-type {
  flex: 1 0 30%;
    border: 1px dashed red;
}

img {
  width: 100%;
}

.card > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px) {
  .card        { flex-direction: column; }
  .card-img    { order: 3; }
  .card-number { order: 2; }
  .card-type   { order: 1; }  
}

＆＃13;

<div class='card'>
    <div class='card-img'>
      <img src="http://i.imgur.com/60PVLis.png">
    </div>
    <div class='card-number'>555</div>
    <div class='card-type'>Orange</div>
</div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/7y8sarwn/