Css 如何垂直排列flexbox方向？

我在包装器上使用flexbox，我有2行3列，如下所示：

A B C
1 2 3

这或多或少是我的问题：

<div class="container">
        <div class="col col-1">
          <div class="title">
            <img src={"http://es.rockybytes.com/i/393/image.jpg"} />
          </div>
          <div class="content">1</div>
        </div>
        <div class="col col-2">
          <div class="title">
            <img
              src={
                "https://www.portalprogramas.com/imagenes/programas/es/704/6704_0.jpg"
              }
            />
          </div>
          <div class="content">2</div>
        </div>
        <div class="col col-3">
          <div class="title">C</div>
          <div class="content">3</div>
        </div>
      </div>

但是我很想

A
1
B
2
C
3

不管怎样，只使用css就可以做到这一点吗

我正在react中做一个应用程序：可以使用一些“isMobile”条件并创建两个不同的模式。但是如果能够配置css flexbox就可以了

解决方案：

---

我无法使用两行，我使用了一行和

align items:baseline

，而不是@subgeo

建议使用

flex flow:row wrap将容器定义为一个flex。看看这个例子


.container{
显示器：flex；
柔性流：行换行；
}
上校{
宽度：50px；
显示器：flex；
柔性流动：柱；
证明内容：中心；
右边距：3倍；
}
.col-1{
背景色：#f99；
}
.col-2{
背景色：#9f9；
}
上校3{
背景色：#99f；
}

A.
1.
B
2.
C
3.
通过嵌套行和列flex，您可以使用flex订单。看，嘿！我已经在使用flex order了，但它们似乎都是水平排列的，我想要一个垂直排列（示例中的那个，我们一列一列地选择），你有没有到目前为止你所做的任何图像？很高兴听到它对你有用但是，我认为你能做的更简单的事情（在2行方法中）是复制内容，所以，您将在列中包含
.title
和
.content
元素，但您将在桌面上隐藏
.content
，在移动媒体查询中隐藏
.row-2
。我刚刚意识到我的示例不足以解决我的问题。我正在编辑描述。对不起
A
1
B
2
C
3