在你的媒体1200px中，你仍然使用position:absolute。你需要设置它的location-container类为relative，一旦你在那个视口中。你还需要添加min-width到它，使每个location-container是相等的。

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
} 

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 3rem 4rem;
        gap: 2rem;
        position: relative;
    }

    .location-container {
        position: relative;
        background-color: #fffaf7;
        margin-left: 1rem;
        padding: 1rem;
        top: 1rem;
        min-width:300px;
    }
}

<div class="locations">
    <div class="location">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>
    <div class="location">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>

对于你的原始代码来说，这可能不是真的，但是第一个<div class="location-container>在class属性中缺少了一个结束的"，这会妨碍你，需要修正（在代码片段中完成）。
您使absolute相对于.locations定位为location-container，结尾为s，但它们应该相对于.location，而不使用s。
所以

• 从.locations中删除position: relative
• 将.location { position: relative }添加到CSS

你可以走了。
顺便说一句，我确实注意到了溢出的.location内容，但添加了一些不错的随机图片来显示效果。

UPDATE在深入查看您的代码后，我注意到除了 flexbox.locations { flex-direction: column }之外的所有属性都是不同的。没有必要再次定义其他属性。

经验法则：

• 定义介质查询之外的所有属性，这些属性对于每个设备都保持不变。
• 仅覆盖需要更改和/或添加新属性的属性。在这种情况下，仅需要更改flex-direction。

我相应地调整了片段...

.locations {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 4rem;
    gap: 2rem;

/*    position: relative; /* REMOVE */
}

/* ADD */
.location {
    position: relative;
}

.location-container {
    position: absolute;
    background-color: #fffaf7;
    margin-left: 1rem;
    padding: 1rem;
    top: 1rem;
}

.location-container h2 {
    font-family: "Roboto Condensed", sans-serif;
    margin-bottom: 1rem;
}

.location-container p {
    font-family: "Cabin", sans-serif;
}

.location img {
    width: 100%;
    max-height: 46rem;
}

@media only screen and (max-width: 1200px) {
    .locations {
        flex-direction: column;
   }
}

<div class="locations">

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=1">
        <div class="location-container">
            <h2>Herring Bone Library</h2>
            <p>141 Address St. <br>Detroit, MI <br>49449</p>
        </div>
   </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=2">
        <div class="location-container">
            <h2>Sunrise Botanical <br>(Downstairs)</h2>
            <p>2397 Hatchet Rd. <br>Suite 11 <br>Detroit, MI <br>49447</p>
        </div>
    </div>

    <div class="location">
        <img src="https://picsum.photos/1200/700?random=3">
        <div class="location-container">
            <h2>Black Cat Coffee</h2>
            <p>686 My Mind <br>Detroit, MI <br> 49448</p>
        </div>
    </div>
</div>