具有最大宽度和粘贴图像/文本的网格

Question

我需要获得如下图像和文字的曲折：

文字 - 图片

图片 - 文字

文字 - 图片

并在移动设备上

图像

文本

图像

文本

图片文字

-

第一个问题是移动设备上的顺序与网络不同，但我认为我可以通过推送和拉动md类来实现这一目标。

我真正的问题是，在网络版本上，我需要在左侧对齐文本，但不知何故总是浮在一起。

当我把课程放得像 md-6 md-6它会自动将块对齐到左侧并产生不需要的间距。当我使用文本对齐时，文本不再对齐，当我使用float时，div交换位置。有没有一种简单的方法来实现这样的目标？

由于它需要保持在中间，我计划使用最大宽度。

<div class="row">
  <div class="col-xs-12 col-md-6">
    <h2>Snel van start</h2>
    <p>In minder dan 1 minuut je vacature op de smartphone van duizenden geschikte jobstudenten.</p>
  </div>
  <div class="col-xs-12 col-md-6">
    <%= image_tag("snel-van-start.png") %>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-6">
    <%= image_tag("alles-in-eigen-handen.png") %>
  </div>
  <div class="col-xs-12 col-md-6">
    <h2>Alles in eigen handen</h2>
    <p>Seal Jobs analyseert en sorteert alle kandidaten automatisch. Jij kiest dan de geschikte kandidaat, zonder tijd te verliezen.</p>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-6">
    <h2>Directe communicatie</h2>
    <p>Ideale kandidaat gevonden? Via de ingebouwde chatfunctie kan je met meteen verdere afspraken maken met je gematchte kandidaat.</p>
  </div>
  <div class="col-xs-12 col-md-6">
    <%= image_tag("directe-communicatie.png") %>
  </div>
</div>

给出这样的东西：

那么如何确保文本和图像之间没有空白？

Answer 1

你可以做一些事情，比如用div包装内部内容并浮动它们，这样你的对齐就会保留，空间问题也会被解决。

<div class="row">
<div class="col-xs-12 col-md-6">
  <div class="pull-right">
     <h2>Snel van start</h2>
     <p>In minder dan 1 minuut je vacature op de smartphone van duizenden 
      geschikte jobstudenten.</p>
  </div>
</div>
<div class="col-xs-12 col-md-6">
  <div class="pull-left">
     <%= image_tag("snel-van-start.png") %>
  </div>
</div>
</div>