ブートストラップ3画像の周囲にテキストを折り返す

Question

私はテキストが画像の高さよりも長い場合は私のテキストの下に折り返したいと思う私のテキストを保持している3の私のプロジェクトの画像を保持する9の列私は列を入れ子にしようとしましたが、成功していませんでした。私はちょうど12の列の画像をテキストと整列させましたが、モバイルではテキストが画像の上に表示されます。デフォルトの列の振る舞い。ここで

は私のコードです：ここでは

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <h2 class="blue-header"><?php the_title(); ?></h2> 
      <p class="first-para"><?php the_content(); ?></p> 
     </div> 
     <div class="col-md-9"> 
      <?php $image = get_field('single_project_image', $id); ?> 
      <img src="<?php echo $image[url]; ?>" class="img-responsive margin-image"> 
     </div> 
    </div> 
</div> 

は、私が作成したBootsnippへのリンクです：あなたは、メインカラム内の画像を入れて、右のそれを浮かべている場合

http://bootsnipp.com/snippets/6n3q5

Answer 1

私は画像を複製することを提案します。テキストの前に最初のインスタンスを配置します。これはワイドスクリーンでfloat: right;になります。 2番目のインスタンスは、テキストの後に配置されます。狭い画面に表示されます。サムネイルとしてあなたのイメージを使用すると、キャプションとしてテキストをラップアラウンドについて

.img-clone-1 { 
 
    max-width: 60%; 
 
    margin: 18px 0 18px 18px; 
 
} 
 
.img-clone-2 { 
 
    width: 100%; 
 
    margin: 12px 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-magic"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-1 hidden-xs pull-right"> 
 
     <h2 class="blue-header">Test Project</h2> 
 
     <p class="first-para">Marshmallow donut wafer oat cake chocolate bar jelly beans dragée. Donut macaroon lollipop. Chocolate cake dragée pastry donut cupcake dragée danish jelly-o. 
 
     Jelly-o marzipan pastry cotton candy pudding halvah pastry pastry. Tart lemon drops bear claw sugar plum wafer. Icing icing gummies donut pie topping toffee muffin. 
 
     Danish macaroon cookie toffee bear claw. Icing cheesecake pie cake pie fruitcake brownie. Gummi bears chocolate bar marshmallow chupa chups. 
 
     Tart pudding tiramisu tootsie roll cake icing chocolate pie. Marshmallow donut cheesecake. Brownie halvah toffee ice cream powder lollipop wafer liquorice. 
 
     Pudding dessert carrot cake pastry oat cake dessert toffee topping cheesecake. Lemon drops jelly-o chupa chups dragée. Pie muffin liquorice tiramisu icing oat cake brownie bear claw. Cake halvah soufflé caramels tiramisu.</p> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-2 visible-xs img-responsive"> 
 
    </div> 
 
    </div> 
 
</div>

http://bootsnipp.com/snippets/qgqdg

Answer 2

何？画像の周りに余白を設定して、希望の間隔に合わせます。

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-responsive margin-image pull-right"> 
     <h2 class="blue-header">Test Project</h2> 
     <p class="first-para">Marshmallow donut wafer oat cake chocolate ... snip .... 
     </p> 
     </div> 
    </div> 
</div> 

次に、モバイルでは、特定の画面解像度の下で、イメージをフローティングではなく表示ブロックに設定できます。