html - 在 Bootstrap 4 中将两列组合成两个不同的行

Question

我有 2 行，每行包含 3 列。每列都是 .col-lg-4 .col-md-4 .col-sm-12 类。我想做一个技巧，我可以组合两个垂直对齐的列(包含图像的列和上面的列)，这样它就只有一列。有没有可能。

代码:

<div class="container">
        <div id="services">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptate vitae vel necessitatibus in ut modi eligendi labore, fuga quaerat libero dignissimos, optio dolore, facere, nostrum quidem culpa laboriosam eveniet.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam quibusdam illum porro labore adipisci asperiores totam aut eaque excepturi aliquid, esse inventore laborum dolorem ipsum error harum vero, quasi.</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">

                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aliquam ipsa veritatis optio nihil expedita quia dolore sint officiis cumque. Ab quae, aspernatur saepe vitae reiciendis incidunt commodi dolorem amet!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fugit nisi fuga dolore expedita. Amet libero quas provident assumenda vitae inventore nisi maxime beatae distinctio porro. Enim dicta qui quos!</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <img src="assets/imgs/cats4-compressor.jpg" alt="Image" id="services-image">
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以像这样嵌套列...

https://www.codeply.com/go/TQa9DOZk2w

     <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum voluptate vitae vel necessitatibus in ut modi eligendi labore, fuga quaerat libero dignissimos, optio dolore, facere, nostrum quidem culpa laboriosam eveniet.</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam quibusdam illum porro labore adipisci asperiores totam aut eaque excepturi aliquid, esse inventore laborum dolorem ipsum error harum vero, quasi.</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, aliquam ipsa veritatis optio nihil expedita quia dolore sint officiis cumque. Ab quae, aspernatur saepe vitae reiciendis incidunt commodi dolorem amet!</p>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <p><i class="fa fa-bandcamp" aria-hidden="true"></i></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam fugit nisi fuga dolore expedita. Amet libero quas provident assumenda vitae inventore nisi maxime beatae distinctio porro. Enim dicta qui quos!</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <img src="//placehold.it/300x500" alt="Image" id="services-image">
            </div>
     </div>