您已经将.column类的高度硬编码为224px。在较低的屏幕宽度下，224 px不足以包含列中的文本，因此文本溢出列的底部。有许多方法可以修复/更改此问题，这取决于您想要的最终结果，但最简单的方法是将overflow: hidden应用于.column类。
我还建议你熟悉一下你选择的浏览器中的开发工具，特别是“元素”标签（Chrome/Edge），或者“检查器”标签（Firefox）。通常情况下，它们可以通过按F12键来访问，并且可以使调试这样的事情变得非常容易，节省了你提出StackOverflow问题和等待别人帮助你的麻烦。

.info-container {
    width: 100%;
    margin: auto;
    margin-top: 1.2rem;
    display: flex;
}

.column {
    flex: 33.33%;
    flex-direction: column;
    height: 224px;
    padding: 10px;
    margin: 12px;
    text-align: center;
    overflow: hidden;
}
.quote-container {
    background-color: #2c3e4f;
    color: #fff;
    padding: 24px 28px;
    text-align: center;
}

<div class="info-container">
            <div class="column">
                <h2>Lorem ipsum</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione,
                    earum quibusdam a voluptatem nostrum aliquid?
                </p>
            </div>
            <div class="column">
                <h2>lorem ipsum</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolorem
                    illo, consectetur hic quo consequatur in, quisquam doloribus fugit
                    ab voluptatibus velit saepe, perspiciatis placeat officiis. Id
                    quisquam velit deleniti!
                </p>
            </div>
            <div class="column">
                <h2>Lorem ipsum</h2>
                <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa eos
                    nihil at quod adipisci voluptatum sed vel aut est nesciunt non
                    corporis inventore, deserunt eveniet!
                </p>
            </div>
  </div>
  <div class="quote-container">
    <p>Felix, qui potuit rerum cognoscere causas.</p>
    <h3>-Vergilius, Georgica, 2, 490</h3>
  </div>