写真をブートストラップを使って他の写真の下に置きます

Question

私はhtmlとブートストラップが初めてです。少し助けが必要です。 div-col-lg-12に100％の写真があります。別のdivに写真を、左側に、段落を右側に置いてみたいと思います。

2番目のdiv私は最初の画像の下部にありたいと思います。私はどのようにhtmlとbootstrapを2番目のdivにしたのかは、画像が終了した後です。私は、秒が終わった後ではなく、画像の最後になるように秒divの高さ全体を設定します。

私はポジションアブソリュートで試しましたが、反応するようには機能しません。誰かに私にアイデアを与えてください。縦内容の各セクションの

HTML

<div class="container main-container"> 
<div class=" top"> 
    <div class="row-fluid"> 
     <div class="col-lg-12"> 

      <img src="images/header.jpg" alt="#" /> 

      <div class="row"> 
       <div class="photo col-lg-2 col-lg-offset-2"> 
        <img src="images/best_friends_logo.png" alt="#" /> 
       </div> 
       <div class="info col-lg-8"> 
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

、新しいrowを作成する必要があります。

コードは次のようになります。デモから明確にするために、lgをxsに置き換えています。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-12"> 
 

 
    <img class="img-responsive" src="https://placehold.it/2048x128" alt="#" /> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="photo col-xs-4"> 
 
    <img class="img-responsive" src="https://placehold.it/512x1024" alt="#" /> 
 
    </div> 
 
    <div class="info col-xs-8"> 
 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1> 
 
    </div> 
 
</div> 
 
    </div>

Answer 2

これはうまくいくかもしれない：

<div class="container main-container"> 
<div class=" top"> 
    <div class="row-fluid"> 
     <div class="col-lg-12"> 
      <img src="images/header.jpg" alt="#" /> 
     </div> 

      <div class="col-lg-12"> 
       <div class="photo col-lg-2 col-lg-offset-2"> 
        <img src="images/best_friends_logo.png" alt="#" /> 
       </div> 
       <div class="info col-lg-8"> 
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus velit nec sagittis mattis. Sed et tellus blandit turpis vulputate eleifend. </h1> 
       </div> 
      </div> 
    </div> 
</div> 
</div>