Boot text 3 around the text

Question

I have one column of 3 that contains my text and then a column of 9 that contains the image for my project, if the text is longer than the height of the image, I would like the text to wrap under the image, I tried to insert columns but were not successful, I just aligned the image right in column 12 with the text, but on mobile I would like the text to appear on top of the image with the default column behavior.

Here is my code:

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

Here is the link to Bootsnipp created:

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

Answer 1

I suggest duplicating an image. We put the first instance before the text. It will be float: right; on a wide screen. The second copy will be placed after the text. It will be visible on a narrow screen.

 .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

What if you put the image in the main column and placed it correctly? then place a marker around the image to give it the desired interval.

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

Then for mobile devices, at a certain screen resolution, you can set the image to display a block instead of a floating one.

Answer 3

Place both items in the same column .

An example of using 2 columns in 1 row: <col-md-5> and <col-md-7>

---

Output:

---

Example of using 1 column in 1 row: <col-md-12>

---

Give img identifier (it can be any), and also assign the alignleft class to it (or align if you want it to be aligned on the right), and then style the fields to your liking.

Here is what I used:

 #member-profile-photo.alignleft { float: left; margin-right: 2em; margin-top: 1em; margin-bottom: 1.5em; } 

---

If you want everything to be focused in mobile mode, add a separate multimedia query to remove the floats and fields on the smaller screens.