Html 如何使具有两个元素的 div 行在移动设备中响应

so i have a page that looks like this

用这样的一个HTML

<form id="contact-form">
    <div class="row" style="position:relative">
        <div class="col-md-6">
            <input type="text" placeholder="First Name*" required id="firstName" />
        </div>
        <div class="col-md-6">
            <input type="text" placeholder="Last Name*" required id="secondName" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <input type="email" placeholder="Email*" required id="email" />

        </div>
        <div class="col-md-6">
            <input type="tel" placeholder="Phone Number*" required id="phoneNumber" />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <textarea rows="3" placeholder="Message*" required id="message"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="rehab-btn-secondary btn-send-contact">Send</button>

        </div>
    </div>
</form>

As seen above, there is a div which has a class "row" and the two div elements that contains the input for "First Name" and "Last name", same as "Email" as "Phone Number". This part is ok as I can set the margin-bottom for each "row" class to 15px and each row will have a gap. However, this approach is not responsive, as In mobile it will look like this

内部元素是重叠的，我想不出一种方法来使这一响应，使"名字"和"姓氏"将在另一行与移动模式的空白. 我能只用纯的css和html来处理它吗？或者，如果它是在移动模式下，我需要用javascrip编写一些脚本吗？

有什么建议吗？