html - 使用纯 Bootstrap 4.1.3 动态对齐内容的具体问题？

Question

构建这个网站时，我在顶部有一个主视频，该视频应居中并在桌面上占据 7 列，并在右侧 2 列中占据 3 个垂直堆叠的广告。在移动设备上，同一视频有 12 列，3 个广告并排 3 列。我几乎可以肯定这可以通过使用 Bootstrap 文档似乎建议的 .offset 来实现，但我没有得到想要的结果。相反，我得到的是垂直堆叠在视频下方的图片广告，这只发生在桌面和移动纵向模式下。任何帮助将不胜感激。

<div class="jumbotron jumbotron-fluid" id="mainVideoJumbotron">
            <div class="container-fluid" id="mainVideoContainer">
                <div class="row justify-content-center">

                    <div class="col-lg-7 col-sm-12 col-md-12">

                        <h1 class="heading text-center">I, Pet Goat &#8545;</h1>
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/6n_xCI-peq0" allowfullscreen></iframe>
                        </div>


                    </div>


                    <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0">
                        <img src="images/ads.jpg" class="img-fluid" alt="ad1">
                    </div>

                    <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0">
                        <img src="images/ads.jpg" class="img-fluid" alt="ad2">
                    </div>

                    <div class="col-lg-2 offset-lg-10 col-md-3 col-sm-3 offset-md-0 offset-sm-0">
                        <img src="images/ads.jpg" class="img-fluid" alt="ad3">
                    </div>

                </div>
            </div>

</div>

Answer 1

HTML

<div class="container-fluid">
    <div class="row">
        <!-- 12 columns on mobile, 7 columns on desktop -->
        <div class="col-12 col-lg-7">
            <!-- video -->
        </div>
        <!-- 12 columns on mobile, 3 columns to the right on desktop -->
        <div class="col-12 col-lg-2 offset-lg-3">
            <div class="row">
                <!-- 
                  3 columns each side by side, which means it takes
                  up 4 columns each. 12 columns on desktop as they
                  need to stack up.
                -->
                <div class="col-4 col-lg-12">ads</div>
                <div class="col-4 col-lg-12">ads</div>
                <div class="col-4 col-lg-12">ads</div>
            </div>
        </div>
    </div>
</div>

fiddle : http://jsfiddle.net/aq9Laaew/139532/