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

例如，课程offset-0 offset-lg-5。

阅读文档here。

下面的Bootstrap订单和col

2 个答案: