2つの列にテキストを表示するブートストラップ

Question

こんにちは、私はSQL Server（検索に問題はありません）から2つの列に取得するテキスト列を配布したいと思います。

このjsfiddle

<div class="container-fluid" style="margin-top:170px;"> 
<div class="row"> 
    <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
    <div class="col-lg-6"> 
     <h1>John Doe</h1> 
     <h2><b>Director</b></h2> 
     <h5> 
      Education, title, 
     </h5> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-5 col-lg-6"> 
     <h3 style="margin-top:50px"> 
      About 
     </h3> 
     <p class="pp"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis. 
     </p> 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
    </div> 
    <div class="col-sm-5 col-lg-6" style="margin-top:90px"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula. 
     </p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p> 

所望のレイアウトを示しています。あなたが見ることができるように段落スペースがあり、それは良いように見えます。私はこの列を使用してこれを得ることができますfar。私はそれを上記のようなフォーマットにすることはできません。誰かが私に希望の書式設定を手伝うことができますか？

Answer 1

最初に.newspaper要素からh3ヘッダーを取り出し、その上に配置して、両方の列のテキストが同じレベルで開始するようにします。そして、負のマージンを避け、あなたが引用された例のように小さな画面上の幅を制限するh3と.newspaper DIVの両方に対応するブートストラップクラスを追加します。class="col-sm-10 col-lg-12"

はここでの結果です：https://jsfiddle.net/sozeojgx/1/

Answer 2

あなたはそれを達成することができますちょうど2メディアクエリ：

@media only screen and (max-width: 768px) { 
    .margin{ 
    margin-top: 0px; 
    } 
} 
@media only screen and (min-width: 769px) { 
    .margin{ 
    margin-top: 85px; 
    } 
} 

ちょうどクラスmarginを追加し、メディアクエリを追加しました。 チェックこのCODEPEN

@media only screen and (max-width: 768px) { 
 
    .margin { 
 
    margin-top: 0px; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 769px) { 
 
    .margin { 
 
    margin-top: 85px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid" style="margin-top:170px;"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
 
    <div class="col-lg-6"> 
 
     <h1>John Doe</h1> 
 
     <h2><b>Director</b></h2> 
 
     <h5> 
 
     Education, title, 
 
     </h5> 
 
    </div> 
 
    <div class="col-lg-6"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-5 col-lg-6"> 
 
     <h3 style="margin-top:50px"> 
 
     About 
 
     </h3> 
 
     <p class="pp"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis 
 
     purus. Nulla tristique iaculis. 
 
     </p> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. 
 
     Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
 
    </div> 
 
    <div class="col-sm-6 col-lg-6 margin"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis 
 
     fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu. 
 
     <p> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula n</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

変更COL-XS-6 COL-SM-6 COL-MD-6 COL-LG-6

へのdivのクラス

私はHTMLのみを変更し、うまく動作します。

<div class="container-fluid" style="margin-top:170px;"> 
    <div class="row"> 
     <div class="col-sm-6"><img alt="Bootstrap Image Preview" src="http://placehold.it/300x205/3498db/fff" style="height:320px" class="img-thumbnail"></div> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h1>John Doe</h1> 
      <h2><b>Director</b></h2> 
      <h5> 
       Education, title, 
      </h5> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
      <h3 style="margin-top:50px"> 
       About 
      </h3> 
      <p class="pp"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae magna arcu. Aenean vulputate neque vitae libero malesuada auctor. Fusce sed congue sem. In ultrices, velit sed aliquam fringilla, massa quam posuere massa, ut viverra quam eros quis purus. Nulla tristique iaculis. 
      </p> 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor malesuada magna, in vulputate nunc eleifend quis. Fusce varius a erat nec faucibus. Aliquam velit ante, fringilla sed sem ac, congue.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ipsum vulputate, laoreet metus at, mattis velit. Nullam diam sem, bibendum in odio et, tincidunt fringilla dolor. Etiam sit amet turpis laoreet, rhoncus magna eget, pharetra turpis. Pellentesque ut massa sit amet nibh ultricies efficitur. Proin.</p> 
     </div> 
     <div class="col-sm-5 col-lg-6" style="margin-top:90px"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt laoreet leo non porta. Duis quis blandit lacus. Mauris nec blandit arcu. Sed vulputate condimentum lorem, gravida imperdiet quam efficitur et. Praesent odio odio, convallis fermentum ante sed, semper molestie ipsum. Nulla rutrum tempus nunc quis cursus. Curabitur neque augue, tincidunt eu.<p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet sem ullamcorper, aliquet ligula non, posuere nunc. Morbi vehicula ac sapien nec vehicula. Donec commodo, elit consequat consectetur suscipit, turpis urna aliquam odio, eget pulvinar ligula. 
      </p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis volutpat dui, a mollis lorem. Quisque rutrum in ante id pretium. Curabitur nec turpis lobortis, facilisis..<p> 
</div> 
    </div>  

</div>