引导顺序和下面的列答案

【问题标题】：Bootstrap order and col below引导顺序和下面的列
【发布时间】：2017-11-28 05:19:22
【问题描述】：

我正在为引导布局而苦苦挣扎。

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

标题图片文本

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

图片标题文本

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

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
除了@Paulie_D 所说的，您还可以在jsfiddle.net 上提供一个jsFiddle。如果它是可见的，则更容易理解您遇到的问题。
sn-p 添加，谢谢
这是不可能的，除非你将它与固定高度结合起来，例如浮动......像这样stackoverflow.com/questions/45883549/…

标签： html css flexbox twitter-bootstrap-4

【解决方案1】：

我使用 Bootstrap class 找到了这个解决方案。你可以试试这个。我重复订单 3。检查sn-p。

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

注意：请全角检查此 sn-p。

【讨论】：

感谢您的帮助，但我希望避免重复内容

【解决方案2】：

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

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

阅读文档here。

【讨论】：

它不适用于偏移量。文字内容总是在图片下方
最后，我将您的解决方案与个人 css 一起使用。谢谢！