Html 使用flexbox的响应性双列布局

我有一个两列布局，底部对齐的图像和顶部对齐的标题。它可以在不使用任何JavaScript的情况下工作，但我觉得在结构上，文本应该与图像位于同一单元格中，而不是位于下一行。这将允许我在mobile上创建一列，而不需要任何额外的标记

我怎样才能做到呢

/*全局*/
*{
保证金：0；
填充：0；
}
html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
html，正文{
宽度：100%；
身高：100%；
字体系列：无衬线；
}
img{
显示：块；
宽度：100%；
高度：自动；
}
.左栏{
宽度：66.6%；
背景：粉红色；
右侧填充：30px；
}
.右上校{
背景：薄荷霜；
宽度：33.3%；
左侧填充：30px；
}
/*场地*/
.地点{
显示器：flex；
flex-flow：行nowrap；
位置：相对位置；
宽度：90%；
左：50%；
转化：translateX（-50%）；
边框：1px纯灰；
}
.site.left col、.site.right col{
弹性：10自动；
显示器：flex；
柔性流动：柱状nowrap；
}
.地点.项目{
弹性：1；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
}

一行文字

文本的多行

据我所知，当你在手机上时，两张图片应该垂直对齐，而不是内联对齐？如果是的话

你可以使用@media查询

@media (max-width:760px) {
  .site {
    flex-direction: column;
  }
}

示例：（分辨率降低到760像素）

---

据我所知，当你在手机上时，两张图片应该垂直对齐，而不是内联对齐？如果是的话

你可以使用@media查询

@media (max-width:760px) {
  .site {
    flex-direction: column;
  }
}

示例：（分辨率降低到760像素）

---

啊，很抱歉，我认为我的示例有效，我还需要图像底部水平对齐。在本示例中，图像没有保持其自然纵横比，设置为高度：80%；宣言。这适用于这组特定的图像，但不适用于其他图像。我认为flexbox可能不是这个布局的解决方案。很抱歉，我认为我的示例有效，我还需要图像的底部水平对齐。在这个示例中，图像没有保持其自然纵横比，它被设置为高度：80%；宣言。这适用于这组特定的图像，但不适用于其他图像。我认为flexbox可能不是这种布局的解决方案