Jquery 当一个div旁边的另一个div扩展时，如何防止该div移动

我有两个街区，一个大的，一个小的。较小的一个可以扩展（扩展的程度是可变的）。 当它展开时，第三个分区的顶部（与第一个分区下的宽度相同）正在移动，以便顶部与展开分区的底部匹配。我需要的是第三个分区保持在第一个分区的底部

我试着把第1块和第3块放在一个col-md-8中，第2块放在col-md-4中。这是可行的，但在手机上，我需要在第一块和第三块之间的扩展块。我也尝试过从引导中查看卡片列，但我无法定义宽度或更改移动设备上的显示顺序

我做了一把小提琴来说明问题：

$（'.expand'）。单击（函数（）{
$（'.block-2'）.toggleClass（'height-300'）；
})

.row{
背景#f8f9fa；
边缘顶部：20px；
}
[class^=“col-”]{
边框：实心1px#6c757d；
填充：10px；
}
1号楼{
高度：200px；
}
.第2区{
高度：150像素；
}
.第3区{
高度：200px；
}
.身高-300{
高度：300px；
}

第一区
第2区
我需要在手机的1号区和3号区之间

扩大
第3区
如果块2扩展，我仍然需要连接到块1

我在第二个扩展分区内添加了一个额外的

，并将高度扩展更改为这个内部分区。我希望它现在能按照您的要求工作

在css的末尾，有一个媒体查询。微调以与您的小屏幕分辨率完美匹配

它在代码段中无法正常工作，因为不包括引导。在你的代码中试试这个

$（'.expand'）。单击（函数（）{
$（'.expander'）.toggleClass（'height-300'）；
})

.row{
背景#f8f9fa；
边缘顶部：20px；
}
[class^=“col-”]，
.扩展器{
边框：实心1px#6c757d；
填充：10px；
}
1号楼{
高度：200px；
}
.第2区{
高度：150像素；
边界：无；
填充：0；
}
.第3区{
高度：200px；
}
.身高-300{
高度：300px；
}
/*根据所需的移动分辨率微调此媒体查询*/
@媒体屏幕和屏幕（最大宽度：600px）{
.第2区{
高度：自动；
}
}

第一区
第2区
我需要在手机的1号区和3号区之间

扩大
第3区
如果块2扩展，我仍然需要连接到块1

有两种方法。一种是使用重复的div内容，但这样做效率不高。这是另一个解决方案。通过使用媒体查询。需要注意的一点是，您已经为列指定了边框，我使用了边框进行内容潜水

这解决了这两个问题。 1.扩展div不会影响高度 2.区块2将保留在区块1和区块3的中间

$（'.expand'）。单击（函数（）{
$（'.block-2'）.toggleClass（'height-300'）；
})

.row{
背景#f8f9fa；
边缘顶部：20px；
}
[class^=“col-”]{
边框：实心1px#6c757d；
填充：10px；
}
1号楼{
高度：200px；
明确：两者皆有；
}
.第2区{
高度：150像素；
位置：绝对位置；
边框：实心1px红色；
}
@仅介质屏幕和（最大宽度：767px）{
.第2区{
位置：相对位置；
}
}
.第3区{
高度：200px；
}
.身高-300{
高度：300px；
}

第一区
第2区
我需要在手机的1号区和3号区之间

扩大
第3区
如果块2扩展，我仍然需要连接到块1

你可以试试这样的方法，稍微看看你对网格解决方案满意吗？@CarstenLøvboAndersen正如我在问题中所说，如果我这样做，移动设备上的订单就不对了。在手机上，我需要扩展的div是第二块，它现在是最新的。如果你希望你的块1和3粘在一起，而块2在这两个中间，块2不会覆盖1的底部内容和3的最高内容吗？@ GOSI在移动中它需要在中间，在桌面上，必须在它们旁边。没有重叠这正是我需要的。我不想复制，但这个职位绝对有效。谢谢