Bootstrap order and col below

Question

我正在用bootstrap布局。

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

标题图像文本

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

图像标题        文本

但是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中使用偏移类。

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

在此处阅读文档。