Html 列堆叠图像的Div内Flexbox收缩图像

我想有一个图像在左边和两个在右边堆叠在一起。随着足迹水平缩小，我希望图像也变小，保持其纵横比。当我现在这样做的时候，图像保持相同的大小，并被推离页面的左侧

我正在使用bootstrap 3。*现在。但是我很想知道如何使用flexbox来实现它

*{
框大小：边框框；
}
.内容{
背景色：rgba（0,0,0,0.3）；
填充：10px；
}
.行{
显示器：flex；
柔性流程：柱包裹反向；
证明内容：中心；
对齐项目：居中；
最大宽度：600px；
高度：40px；
背景色：rgba（0,0,0,2）；
}
.细胞{
文本对齐：居中；
显示器：flex；
对齐项目：居中；
最小高度：50%；
垫面：5px；
垫底：5px；
}
.订购3{
顺序：3；
弹性：2；
右边填充：10px；
右边框：rgba（0,0,0,0.3）实心3px；
}
.订购2{
顺序：2；
弹性：1；
}
.订购1{
顺序：1；
弹性：1；
}
img{
保证金：自动；
宽度：100%；
最大宽度：300px；
最高高度：100%
}

检查我的密码。如果这不是你想要的，请澄清你的问题

*{
框大小：边框框；
}
.内容{
背景色：#f9f9f9；
边框：1px实心#ececec；
填充：10px；
}
.行{
显示器：flex；
对齐项目：居中；
}
.细胞{
垫面：5px；
垫底：5px；
}
img{
宽度：100%；
显示：块；
最大宽度：300px；
}

---

就是这样。我希望我不需要在一个“单元格”中放置两个图像，这样在不更改HTML的情况下更容易移动图像。但这不是什么大问题。