Bootstrap 4 - Не могу заставить мою <h2> обернуть размер XS

Question

У меня есть два столбца ниже, но H2 в первом col-md-6 не будет переноситься на экран небольшого размера. При изменении размера браузера он имеет тенденцию переноситься до размера экрана XS, а затем превращается в одну длинную строку текста.

<section id="hero">
    <div class="container">
        <div class="row">
            <div class="col-md-6 px-3">
                <h1>Selling Real Estate Just Got Easier</h1>
                <h2 style="word-wrap:break-word">Our U.S. based transaction coordinators handle contract to close so you can focus on prospecting.</h2>
                <button class="btn btn-green">Get Started</button>
            </div>
            <div class="col-md-6"></div>
        </div>
    </div>
</section>