Bootstrap 3 avvolge il testo intorno all'immagine

Question

Ho una colonna di 3 che contiene il mio testo e quindi una colonna di 9 che contiene l'immagine per il mio progetto, se il testo è più lungo dell'altezza dell'immagine Vorrei che il testo si avvolgesse sotto l'immagine, ho provato a nidificare le colonne ma non hanno avuto successo, ho semplicemente allineato l'immagine direttamente in una colonna di 12 con il testo ma su mobile vorrei che il testo comparisse sopra l'immagine, con il comportamento della colonna di default.

Ecco il mio codice:

<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> 

Ecco un link ad un Bootsnipp ho creato:

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

Answer 1

Propongo di duplicare l'immagine. Inseriremo la prima istanza prima del testo. Questo sarà float: right; sull'ampio schermo. La seconda istanza verrà posizionata dopo il testo. Sarà visibile sullo schermo stretto.

.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

Che cosa succede se si mette l'immagine all'interno della colonna principale e volò nel modo giusto? quindi imposta il margine intorno all'immagine per assegnargli la spaziatura desiderata.

<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> 

Quindi per il cellulare, con una certa risoluzione dello schermo, è possibile impostare l'immagine per visualizzare il blocco anziché fluttuare.