0

左にテキストの列があり、中央にイメージがあり、右にテキストがあります。小さな画面サイズでは、最初に画像を表示し、その後にテキスト列を表示したいと思います。左と右のセルを下に、右のセルを上に、ブートストラップを使って上に移動

どうすればいいですか?

私の3列は次のようになります。

<div class="row"> 
    <div class="col-lg-3"><p>Text1</p></div> 
    <div class="col-lg-6"><img src="inmiddleorabove.png"></div> 
    <div class="col-lg-3"><p>Text2</p></div> 
</div> 

答えて

2

はあなたが必要とするこのですか?それを試してみてください:あなたは は、他の画面サイズのためにあなたのコラムを押したり引っ張ってcolumn orderingを使用し、最初の小さな画面の列の順序を設定する必要が

<div class="row"> 
    <div class="col-xs-12 col-lg-6 col-lg-push-3"> 
     <img src="inmiddleorabove.png"> 
    </div> 
    <div class="col-xs-3 col-lg-3 col-lg-pull-6"> 
     <p>Text1</p> 
    </div> 
    <div class="col-xs-3 col-lg-3"> 
     <p>Text2</p> 
    </div> 
</div> 

このヘルプが必要です。

ここをクリックしてください:http://bootply.com/y4N70nGh40

+0

プッシュプルの素敵な例。 – ZimSystem

関連する問題