我一直在想这个问题，但我似乎就是做不到。

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 order-1 mb-auto mt-auto">
                <article>
                    <h1 class="display-4 text-center">Miért jó a töltőtoll?</h1>
                    <hr>
                    <p class="text-justify">Egy igazán jó töltőtoll akár egész életünkben hű társunk lehet az írás területén. Aki igényes és szeretné, hogy azok az írások, amiket készít nagyon szépek legyenek azoknak érdemes a töltőtollak között szétnézni. A töltőtollal készített írások teljesen máshogy néznek ki mint a golyóstollal készítettek, sokkal szebbek és igényesebbek. Egy töltőtoll sokkal szebben és igényesebben kidolgozott íróeszköz mint az egyszerűbb golyóstollak, arról nem is beszélve, hogy sokkal tartósabbak mint a golyóstollak. Egy jó töltőtollal az írás érzete is sokkal jobb, csak úgy siklik a papíron a tollnak a hegye. A toll tartásának a változtatásával pedig más és más vastagságú írás módot alkalmazhatunk. Ez pedig egy elegáns írásképet ad a töltőtoll tulajdonosának. A töltőtollakhoz, többféle színű tintát kapunk így még színesebbé tehetjük az írást.</p>
                    <hr>
                    <p class= "text-justify hide-on-print">A videóhoz tartozó leírás <a href="leiras.xhtml">elérhető ezen a linken.</a></p>
                </article>
            </div>
            <div class="col-lg-8 order-2 hide-on-print">
                <figure>
                    <video class="embed-responsive embed-responsive-16by9 mb-auto mt-auto" controls poster="images/poster.png">
                        <source class="embed-responsive-item" src="images/video.mp4">
                        <source class="embed-responsive-item" src="images/video.ogg">
                        Nem támogatja a videó tagot a böngésző.
                    </video>
                </figure>
            </div>
        </div>
    </div>

我目前有这样的代码，它使文本显示在2或1列中，这取决于设备，但我希望它环绕视频，如 此:

有人能帮我明白我做错了什么吗？我尝试将float添加到图形的div中，但没有影响。

顺晟科技：

如果我没理解错的话，文字应该围绕着视频。但是如果将文本和视频分隔成列，则文本不能环绕视频。 要实现此行为，视频应该与文本放在同一个容器中:

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 order-1 mb-auto mt-auto">
                <article>
                    <h1 class="display-4 text-center">Miért jó a töltőtoll?</h1>
                    <hr>
                    <p class="text-justify">Egy igazán jó töltőtoll akár egész életünkben hű társunk lehet az írás területén. Aki igényes és szeretné, hogy azok az írások, amiket készít nagyon szépek legyenek azoknak érdemes a töltőtollak között szétnézni. A töltőtollal készített írások teljesen máshogy néznek ki mint a golyóstollal készítettek, sokkal szebbek és igényesebbek. Egy töltőtoll sokkal szebben és igényesebben kidolgozott íróeszköz mint az egyszerűbb golyóstollak, arról nem is beszélve, hogy sokkal tartósabbak mint a golyóstollak. Egy jó töltőtollal az írás érzete is sokkal jobb, csak úgy siklik a papíron a tollnak a hegye. A toll tartásának a változtatásával pedig más és más vastagságú írás módot alkalmazhatunk. Ez pedig egy elegáns írásképet ad a töltőtoll tulajdonosának. A töltőtollakhoz, többféle színű tintát kapunk így még színesebbé tehetjük az írást.</p>
                    <hr>
                    <p class= "text-justify hide-on-print">A videóhoz tartozó leírás <a href="leiras.xhtml">elérhető ezen a linken.</a></p>
                </article>
            </div>
            <div class="col-lg-8 order-2 hide-on-print">
                <figure>
                    <video class="embed-responsive embed-responsive-16by9 mb-auto mt-auto" controls poster="images/poster.png">
                        <source class="embed-responsive-item" src="images/video.mp4">
                        <source class="embed-responsive-item" src="images/video.ogg">
                        Nem támogatja a videó tagot a böngésző.
                    </video>
                </figure>
            </div>
        </div>
    </div>

工作示例https://jsfiddle.net/ak9dpflm/