Bootstrap 3 owinąć tekst wokół obrazu

Question

Mam jedną kolumnę 3, która przechowuje mój tekst, a następnie kolumnę 9, która przechowuje obraz dla mojego projektu, jeśli tekst jest dłuższy niż wysokość obrazu Chciałbym, żeby tekst zawijał się pod obraz, próbowałem zagnieździć kolumny, ale nie udało mi się, po prostu wyrównałem obrazek w kolumnie 12 z tekstem, ale na telefonie chciałbym, aby tekst pojawił się na górze obrazu, domyślne zachowanie kolumny.

Oto mój kod:

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

Oto link do Bootsnipp stworzyłem:

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

Answer 1

Proponuję powielenie obrazu. Pierwszą instancję umieścimy przed tekstem. Ten będzie float: right; na szerokim ekranie. Druga instancja zostanie umieszczona po tekście. Będzie widoczny na wąskim ekranie.

.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

Co jeśli umieścić obraz wewnątrz głównej kolumny i płynął to prawda? następnie ustaw margines wokół obrazu, aby nadać mu odpowiedni odstęp.

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

Następnie do telefonu komórkowego, pod pewnymi rozdzielczości ekranu, można ustawić zdjęcie, aby wyświetlić blok zamiast płynął.