Bootstrap布局求助：col-md-6/col-sm-6列错位下移问题

你的问题主要出在媒体查询写法错误和列高度不一致导致的浮动布局错位，再加上负margin的不当使用放大了问题，下面一步步帮你解决：

一、先修复CSS的媒体查询问题 #

你原来的代码里没有用@media包裹md/sm尺寸的样式，导致这些样式会直接覆盖大屏的样式，而不是仅在对应屏幕尺寸生效。正确的写法应该是：

/* 大屏（lg，≥1200px）默认样式 */
.quotes { padding-bottom: 15px; }
.img-depoimentos-up, .img-depoimentos-down { 
    max-width: 100%; 
    height: auto; 
    margin-top: -80%; 
}
.txt-depoimentos { 
    color: rgb(71, 107, 172); 
    font-weight: bold; 
    font-size: 18px; 
}

/* md/sm屏幕（768px ≤ 宽度 < 1200px）的样式 */
@media (min-width: 768px) and (max-width: 1199px) {
    .img-depoimentos-up { margin-top: -30%; }
    .img-depoimentos-down { margin-top: 10%; }
}

二、解决列错位的核心：让同行列高度一致 #

Bootstrap 3及之前的.row是用浮动实现的，当某一列的内容高度比其他列高时，下一行的列就会“卡”在上一行较短列的旁边，导致错位。解决方法有两种：

方法1：改用Bootstrap Flex布局（推荐，Bootstrap 4+支持） #

把你的.row替换成带row-cols属性的flex布局行，它会自动让每一行的列高度一致：

<div class="row row-cols-lg-4 row-cols-md-2 row-cols-sm-2 row-cols-xs-1">
  <!-- 你的4个列内容放在这里 -->
</div>

这样不用额外写CSS，Bootstrap会自动处理列的对齐和换行。

方法2：针对Bootstrap 3的兼容方案 #

如果用的是Bootstrap 3，可以给每个列添加flex属性，强制列高度一致：

.col-lg-3.col-md-6.col-sm-6.col-xs-12 {
    display: flex;
    flex-direction: column;
}

或者在每2个列之后添加清除浮动的元素（仅在md/sm屏幕显示）：

<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <!-- 第一个列内容 -->
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <!-- 第二个列内容 -->
</div>
<!-- 仅在md/sm屏幕清除浮动，避免第三列错位 -->
<div class="clearfix visible-md-block visible-sm-block"></div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <!-- 第三个列内容 -->
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
  <!-- 第四个列内容 -->
</div>

三、优化负margin的使用（可选，让布局更稳定） #

margin-top: -80%这种百分比负margin是基于父元素宽度计算的，在不同屏幕尺寸下容易出现位置偏移异常。可以改用绝对定位来控制图片位置，避免影响布局流：

/* 给每个列添加相对定位 */
.col-lg-3.col-md-6.col-sm-6.col-xs-12 {
    position: relative;
    padding-top: 90px; /* 给顶部图片留出足够空间 */
}
/* 图片绝对定位到列顶部居中 */
.img-depoimentos-up, .img-depoimentos-down {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%; /* 根据需求调整图片大小 */
}

这样图片的位置不会影响其他内容的布局，更稳定可靠。

按以上步骤调整后，你的布局在md/sm屏幕下应该就能正常对齐了。

内容的提问来源于stack exchange，提问作者Pelicer