Html 引导4-栅格1和栅格2改变位置

我需要的示例：

图片：

我的代码是：

<div class="container">
        <div class="row">
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-6">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
            </div>
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-right" alt="Niš">
            </div>
        </div>
        <!-- THIS IS PROBLEM -->
        <div class="row">
            <!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
            <div class="col-3 ml-auto">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
        <!-- END PROBLEM -->
        <div class="row">
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
    </div>

我不知道问题出在哪里。如果有人知道问题在哪里，写下解决方案。谢谢

对不起，我的英语不好

---

谢谢大家。

您需要将小图像放在同一列中，并将它们显示为块：

display:block；宽度：100%；高度：自动

以下是我个人的做法。我使用的是
。在
上没有边沟
类。行
和图像上的白色边框：


[my gallery]：不是（#){
填充：8px；
}
[我的画廊]img{
显示：块；
背景色：#F5；
宽度：100%；
高度：自动；
边框：8px纯白；
}
[我的画廊]。伸展的img{
身高：100%；
}
编辑：我已经更新了我的答案，以包括背景图像，并更好地模拟原始布局。感谢AndreiGheorghiu帮助我们更准确地回答这个问题


.grid{
显示：网格；
栅隙：10px；
高度：500px；
网格模板列：1fr.2fr 1fr.2fr 1fr；
网格模板区域：“上左大上右”
“左中大右中大”
“左下左下左下中下右下右”；
}
图{
背景：url(https://placeimg.com/400/400/any)无重复中心/盖；
字体：700 20px无衬线；
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本阴影：2px 2px 5px#000；
}
.pic-1{
网格区域：左上角；
}
.pic-2{
网格面积：大；
}
.pic-3{
网格区域：右上角；
}
.pic-4{
网格区域：左中；
}
.pic-5{
网格区域：右中；
}
.pic-6{
网格区域：左下角；
}
.pic-7{
网格区域：底部中心；
}
.pic-8{
网格区域：右下角；
}

大赌场
纽约市
拉斯维加斯
费城
旧金山
迈阿密
波士顿
华盛顿哥伦比亚特区
您可以尝试此代码

注：包括响应类。将此代码作为整页运行



为我工作！非常感谢@AndreiGheorghiu它怎么没有反应？至少现在我知道最初投反对票的不是你，而是Sanu，他基本上在16分钟后抄袭了我的答案并投了我的反对票。@AndreiGheorghiu你是第一个批评我的人。你说我的解决方案没有“响应性”，但你的定义是不够的。我的解决方案在视口中相应地收缩或扩展。如果您的意思是它不会以某种方式更改布局，那么需要指定它应该如何更改。另外，你的回复没有我的回复快，而且不完整，没有有效的演示。你是对的。我没有引起足够的注意。如果你解决了网格的大小问题，你可能会得到我的支持。我还将删除以前的注释，因为它们基于错误的假设。为了让它对未来的用户最有用，您可能需要添加一种技术来调整图像大小以适应（背景大小<代码>或对象大小<代码>）。我将使用适当的解决方案编辑我的答案，该解决方案不需要在单元格大小上硬编码
高度
，使用
flexbox
。在我签字之前，这是一个很好的小挑战。小心，快乐编码！