кнопка перекрывается с текстом

Question

Я разместил кнопку на своей странице.Но когда я делаю это на маленьком экране, тогда кнопка перекрывается с текстом (см. Рисунок).

Это мой код для кнопки:

   <div class="row featurette" id="v1">
        <div class="col-md-7">
            <h2 class="featurette-heading">Title. <span class="text-muted">Checkmate.</span></h2>
            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
                euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus,
                tellus ac cursus commodo.</p>
            <button type="button" class="btn btn-outline-secondary" id="btn1">mehr Erfahren</button>
        </div>
        <div class="col-md-5">
            <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="500x500"
                src="https://i.stack.imgur.com/amo0f.png" data-holder-rendered="true" style="width: 500px; height: 500px;">
        </div>
    </div>