当页面宽度增加到允许三列时，我如何将这些<hr/>标记自动更改为垂直线？在小型设备上，它们可以正确地分隔行。我使用的是Bootstrap v4。

<div class="row">
        <div class="col-md-4 col-sm-6 p-4">
            <h2>Have a Question?</h2>
        </div>
        <div class="col-md-4 col-sm-6 text-center p-4">
            <hr/>
            <h3>FAQs</h3>
            <p>Get more information about ordering, payments and product delivery.</p>
        </div>
        <div class="col-md-4 col-sm-6 text-center p-4">
            <hr />
            <h3 class="mb-4">Call Us</h3>
            <p>Contact our product specialists</p>
        </div>
    </div>