発注問題

Question

私はウェブ開発を学んでいると私はfreeCodeCamp割り当てのためのトリビュートページを構築しようとしています。 https://codepen.io/Art365/pen/ZKxPQj 2番目の行では、理想的には次のようになります。

ビューポートが大きい場合、画像は左側にあり、テキストは右側にあります。 ビューポートが小さい場合、画像は下にあり、テキストは上にあります。私は非常によく似た質問をする前に、ここで求められていると私はこの1つのように、プル左とプル権利を利用し、いくつか提案されている解決策を試してみましたことを実現

<div class="row"> 

    <div class="col-lg-6 col-lg-push-6"> 
    <div class="text-content"> 
     <p>text content</p> 
    </div> 
    </div> 

    <div class="col-lg-6 col-lg-pull-6"> 
    <img id="pic2" src="http://www.thefamouspeople.com/profiles/images/karl-landsteiner-3.jpg" alt="Landsteiner" /> 
    </div> 

</div> 

：ここ

は、関連するコードスニペットです https://stackoverflow.com/a/20171474/7143798しかし、私の場合、私はhtmlでそれを最初に置かない限り、私は左に（大きな視野で）画像を取得するように見えません。しかし、もし私がhtmlでそれを最初に置くと、それは小さなビューの上に現れます。

Answer 1

CodePenが利用しているため、ブートストラップは、あなたが.push-lg-6と.pull-lg-6を使用する必要があります4.0.0。ブートストラップ3は.col-*-push-*クラスを使用します。

Answer 2

プッシュとプルの必要はありません。ブレークポイントを使用するだけでこれを行うことができます。

<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div> 

    <div class="col-sm-12 col-md-6 col-lg-6"> 
    <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
    </p></div> 
</div> 
<div class="row"> 
    <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div> 

    <div class="col-sm-12 col-md-6 col-lg-6"> 
    <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
    </p></div> 
</div> 

これはLGとミディアムのブレークポイントでそれらを並べて積み重ね、その後、小さなビューポートにトップ/ボトムレイアウトを強制的に全幅列に壊れます。 XSブレークポイントをインクルードする必要はありません。デフォルトではcol-xs- *は12カラムです。