Bootstrap 3将文字环绕图像

pocockn 发表于 Dev

Pocockn

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

格莱布·凯玛斯基（Gleb Kemarsky）

我建议复制图像。我们将第一个实例放置在文本之前。这将float: right;在宽屏上显示。第二个实例将放置在文本之后。在狭窄的屏幕上将可见。

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