按钮与文字重叠

Question

我在页面上放置了一个按钮。但是，当我将其设置为小屏幕时，该按钮将与文本重叠（请参见picute）。

这是我的按钮代码：

   <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>