I've been trying to wrap my head around this, but I just can't seem to make it work.
<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>
I have this code currently, which makes the text appear in 2 or 1 columns depending on the device, but I want it to wrap around the video like this:
Can someone help me understand what am I doing wrong? I tried adding float right to the figure's div, but it made no impact.