Css 引导在短div中嵌套列

我对bootstrap还比较陌生，我正试图在附件中实现类似的效果，但我无法显示文本区域3和4

下面是我的代码 欢迎提出任何建议。我正在寻找一个关于网格系统的好教程 这是图片的链接

<div class="container-fluid">
    <div class="jumbotron">
        <center>
            <h1>Bootstrap Tutorial</h1>

            <p>
                Bootstrap is the most popular HTML, CSS, and JS framework for developing
                responsive, mobile-first projects on the web.
            </p>

            <input type="button" class="btn btn-info" value="Order service ">

        </center>

    </div>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8" >


            <!-- first row 8 div-->
            <div class="short-div">
                <div class="well well-sm">
                    Bootstrap is the most popular HTML, CSS, and JS framework for developing
                    responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing
                    responsive, mobile-first projects on the web.
                </div>
            </div>

            <!-- second row 8 div-->
            <div class="short-div">
                <div class="well well-sm">
                    Bootstrap is the most popular HTML, CSS, and JS framework for developing
                    responsive, mobile-first projects on the web. Bootstrap is the most popular HTML, CSS, and JS framework for developing
                    responsive, mobile-first projects on the web.
                </div>
            </div>


              <!-- third row 8 div-->
            <div class="short-div">

                <!--left 4 div-->
                <div class="col-md-4 col-sm-4" style="background-color:forestgreen">

                </div>

                <!--right 4 div-->
                <div class="col-md-4 col-sm-4" style="background-color:blue">

                </div>

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

---

请记住，如果要细分行，则需要计算相对于父元素的12格线系统（而不是主体）的宽度

使用col-md-6而不是col-md-4，因为它会将父元素划分为列，而不是三列

您所需的布局在以下代码中：

引导程序教程 Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。

Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。 Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。 Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。 Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。

---

@Cthulhu在网站上拥有1.4k的声誉，你必须正确地看到这个问题，并且要知道拥有1个代表的人不能发布图片！我现在添加了一个到附件图像的链接