ブートストラップの順序と並びは

です。私はブートストラップのレイアウトで驚いています。私はこのレイアウト（簡単な部分）は、モバイルでブートストラップの順序と並びは

：デスクトップで

 
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>

出典

2017-11-27 Thomas Beck

ようこそスタックオーバーフロー！あなた自身でこれを少なくともコード化しようとしています。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

@Paulie_Dが言ったことに加えて、https://jsfiddle.net/でjsFiddleを提供することができます。表示可能な場合は、問題の内容を理解することが簡単です。 – Brainfeeder

スニペットを追加しました。ありがとうございます。 –

私は、ブートストラップ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>

注：全幅でこのスニペットを確認してください。

出典

2017-11-27 18:32:54 Rahul

あなたの助けていただきありがとうございますが、私はコンテンツを複製することを避けることを好む –

ブートストラップでオフセットクラスを使用できます。

たとえば、クラスoffset-0 offset-lg-5。

ドキュメントhereをご覧ください。

出典

2017-11-27 21:19:22 Klooven

オフセットで作業する。テキストコンテンツは常に画像の下にあります –

最後に私はpersonnal CSSであなたの解決策を使用します。ありがとう！ –

ブートストラップの順序と並びは

答えて

関連する問題