html5 - 如何在网格系统中添加多个元素并使之响应

我是web开发新手，尝试在bootstrap-4中设计以下屏幕，但无法将其设计为响应式，有人可以描述如何使用bootstrap-4网格系统设计此屏幕。
这是我的图片，我试图用网格系统设计它，使用行和列的概念，它应该是有响应的。
here is my grid picture
这是我的代码：

<div className="row">
<div className="col-md-10">
    <div className="row">
        <div className="col-md-4">
            <div className="fontStyle">
                <span className="">1</span>
                <!-- <div className="displayBlk"> -->
                <label type="text">Select Technology</label>

                    <select value=""  className="selectpicker btn btn-labeled btn-start">
                        <option value="">None Selected</option>
                        <option value="">Hello </option>
                        <option value="">World </option>
                    </select>
                <!-- </div> -->
            </div>
        </div>
        <div className="col-md-4 rowOne">
            <div className="fontStyle">
                Select Question Type
                <button type="button" class="btn btn-primary btn-sm">Code Type</button>
                <button type="button" class="btn btn-default btn-sm">Non Code Type</button>
            </div>
        </div>
        <div className="col-md-4">
            <div className="fontStyle">
                Number Of Questions
                <select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
                    <option value="">Select</option>
                    <option value="">01</option>
                    <option value="">02</option>
                </select>
            </div>
        </div>
    </div>
    <!-- end of 10 col row -->
</div>
<div className="col-md-2">
    <span className="">
        <button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
    </span>
    <span>
        <button type="button" class="btn btn-primary btn-sm">+</button>
    </span>
</div>

这是我设计后的照片，它们看起来怎么样。

谢谢你的帮助！

最佳答案

此链接将帮助您：link
网格系统使用最多12列，记住这一点，并相应地划分列。
但是，因为您的元素都在同一行上，所以应该添加=>
class="row"
在开始使用网格系统之前。通过练习，您将了解网格系统，只需玩弄列的值，就可以肯定地达到目的。
更新：
看看-->

<div class="container">
<div class="row">
    <div class="col-md-4">
        <span class="">1</span>
        <label type="text">Select Technology</label>
        <select value=""  class="selectpicker btn btn-labeled btn-start">
            <option value="">None Selected</option>
            <option value="">Hello </option>
            <option value="">World </option>
        </select>
    </div>

    <div class="col-md-4">
        <div class="row">
            Select Question Type
            <button type="button" class="btn btn-primary btn-sm">Code Type</button><button type="button" class="btn btn-default btn-sm">Non Code Type</button>
        </div>

    </div>
    <div class="col-md-4">
        <div className="fontStyle">
            Number Of Questions
            <select value="" onChange="" className="selectpicker btn btn-labeled btn-start">
                <option value="">Select</option>
                <option value="">01</option>
                <option value="">02</option>
            </select>

            <span className="">
                <button type="button" class="btn btn-outline-primary btn-sm">Reset</button>
            </span>
            <span>
                <button type="button" class="btn btn-primary btn-sm">+</button>
            </span>

        </div>
    </div>

</div>