引导顺序和下面的列

Question

我正在尝试使用引导程序布局。

在移动设备上，我有以下布局（简单的部分）：

Title
Image
Text

在桌面上，我想要这样的布局：

Image   Title
        Text

但是div标题始终具有图像高度。 不可能在其下放置文字。 将不胜感激！ 谢谢 ！

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-lg-5 order-lg-2"> <h2>Title</h2> </div> <div class="col-lg-7 order-lg-1"> <img src="https://lorempixel.com/400/200" lass="img-fluid" alt=""/> </div> <div class="col-lg-5 order-lg-3"> <h3>Cyprum itidem insulam</h3> <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p> </div> </div> </div> 

Answer 1

我使用Bootstrap class找到了该解决方案。 你可以试试看 我重复第3步。 检查代码段。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row justify-content-end"> <div class="col-12"> <div class="row flex-lg-row-reverse"> <div class="col-12 col-lg-5 order-lg-2"> <h2>Title</h2> <div class="row hidden-lg-down"> <div class="col-12 order-lg-3"> <h3>Cyprum itidem insulam</h3> <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p> </div> </div> </div> <div class="col-12 col-lg-7 order-lg-1"> <img src="https://lorempixel.com/400/200" lass="img-fluid" alt=""/> </div> </div> </div> <div class="col-12 hidden-lg-up order-lg-3"> <h3>Cyprum itidem insulam</h3> <p>procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huiuPost quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.s modi</p> </div> </div> </div> 

注意：请以完整宽度检查此代码段。

Answer 2

您可以在Bootstrap中使用偏移量类。

例如class offset-0 offset-lg-5 。

在此处阅读文档。