引导中的"row-fluid"问题，为什么我的"divs"是跳行？

出于某种原因，"col-8"下第 4 行下的"长文本"内容被放置在"col-4"下而不是放在其旁边。我尝试使用"span4"和"span8"代码，但没有奏效。

<div class="container-fluid">
        <div class="row-fluid">
            <div class = "col-12 titles">
                <h1>Global Warming is Real</h1>
            </div>
        </div>
        <div class="row-fluid">
            <div>
                <div class = "col-12">
                    <img src="./pics/mainPic.jpg" alt="Responsive image" class = "img-fluid pics">
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-12">
                <h2 class = "titles"> What are the causes? </h2>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-4">
                <img src="./pics/burningFossil.jpg" alt="" class ="img-thumbnail rounded-circle pics" id = "pics-fossil">
            </div>
            <div class="col-8">
                Long Text
            </div>
        </div>
    </div>```