html - 当屏幕缩小时，div 不会停留在同一个地方并重新调整大小

Question

大家好，我正在使用 Bootstrap 和媒体查询来使我的网站具有移动响应能力。出于某种原因，那些它一直在破坏我的设计。我目前正在努力实现这一目标:

后面的大div是一张图片。然后在左侧我们有一个带按钮的 div，中间的 div 是另一个图像，然后右边的 div 是一些更小的图像。现在我已经创建了这个设计，但是每次你开始缩小屏幕时，右侧的 div 会在中间 div 下方结束，然后中间 div 会在左侧 div 下方结束。这很奇怪。解决这个问题的任何帮助都会很棒。

此处为 fiddle 示例:Code

我猜这与我的主 Div 有关

.Mainimage {

}

所以我正在使用 bootstrap 和 cold-mid 2 等，然后使用一些媒体查询来尝试在它变成 smsall 但它根本不起作用时让它变得更好，任何帮助都会很棒。谢谢

Answer 1

只需添加以下 css 即可。

.Mainimage {
    display: flex;
}

Updated Fiddle