html - 没有嵌套 div 的 Flex-wrapping

Question

我试图在没有嵌套 div 的情况下使用 flexbox 制作水平卡片。

比如我现在的是这样的:

.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>

此布局目前有效，但当视口(viewport)调整大小时，我希望水平的 card 变为垂直的(它已经这样做了)。但是，我想使用 flex 顺序重新排序 card-img、card-number 和 card-type。

如何在使用这种类型的 div 布局时获得相同的水平布局？

编辑: 对于令人困惑的措辞，我深表歉意，我的目的是创建一个像图像一样工作的水平布局，除了 3 个单独的 div，而不是 2 个 div，其中 1 个是嵌套的 div。对不起!

Answer 1

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

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

https://jsfiddle.net/7y8sarwn/