Bootstrap 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;在宽银幕上。第二个实例将放置在文本之后。它将在窄屏幕上可见。

\n\n

\r\n

\r\n

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

\r\n

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">\r\n\r\n<div class="container">\r\n  <div class="row">\r\n    <div class="col-xs-12 col-magic">\r\n      <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">\r\n      <h2 class="blue-header">Test Project</h2>\r\n      <p class="first-para">Marshmallow donut wafer oat cake chocolate bar jelly beans drag\xc3\xa9e. Donut macaroon lollipop. Chocolate cake drag\xc3\xa9e pastry donut cupcake drag\xc3\xa9e danish jelly-o.\r\n      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.\r\n      Danish macaroon cookie toffee bear claw. Icing cheesecake pie cake pie fruitcake brownie. Gummi bears chocolate bar marshmallow chupa chups.\r\n      Tart pudding tiramisu tootsie roll cake icing chocolate pie. Marshmallow donut cheesecake. Brownie halvah toffee ice cream powder lollipop wafer liquorice.\r\n      Pudding dessert carrot cake pastry oat cake dessert toffee topping cheesecake. Lemon drops jelly-o chupa chups drag\xc3\xa9e. Pie muffin liquorice tiramisu icing oat cake brownie bear claw. Cake halvah souffl\xc3\xa9 caramels tiramisu.</p>\r\n      <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">\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

http://bootsnipp.com/snippets/qgqdg

\n