Roman Serdyuk

По-хорошему, в 2021 году такие вещи надо верстать через column-count. Поддержка по Caniuse прекрасная.

В реальной жизни, конечно, всё не идеально, особенно в Сафари, но это точно лучше костылей с гридами, флексами и, прости господи, флоатами.

Почему h3 появляются не в строчку?

потому что тег H блочный элемент https://jsfiddle.net/ywu4m7po/1/

.upper-footer span {
    color: rgba(114, 52, 26, 0.89);
    font-size: 20px;
    font-weight: bold;
    width: 994px;
}

width: 994px; - тут проблема

const mediaQuery = window.matchMedia('(max-width: 992px)');
const handler = () => 
    $(document.body).toggleClass('lock', mediaQuery.matches);
mediaQuery.addListener(handler);
handler();

https://developer.mozilla.org/ru/docs/Web/API/Wind...

А вообще, такое спокойно через CSS можно делать:

@media (max-width: 992px) {
    body {
        /* тут то что у Вас в .lock было */
    }
}

Визуальное руководство по свойствам flexbox
Flexbox Froggy