html - 下面的 Bootstrap 顺序和 col

Question

我正在为 bootstrap 布局而苦苦挣扎。

在手机上我有这个布局(简单的部分):

TitleImageText

On desktop, I want this layout :

Image   Title        Text

But the div title always have the image height. Impossible to put the text below it.Will appreciate any help ! Thanks !

<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>

Note: Check this snippet in full width.