css - Bootstrap 三个同级列，第二列右对齐

Question

我有三个 div，“第一”、“第二”和“第三”。他们是 sibling (具有相同的 parent )，因为在移动设备上，他们应该按照这个确切的顺序简单地出现在彼此的下面。

在较大的设备上，我希望 First 和 Third 位于左侧，Second 位于右侧。下面的代码说明了这一点，您还可以看到它如何看待 http://www.bootply.com/mh9VFWxvp2 .

我的问题是第一个和第三个 div 之间的垂直空间。第三个 div 与第二个 div 的底部垂直对齐。我希望 Third 从 First 的正下方垂直开始，而不在那里留下一 block 空白。如何实现？

<div class="container-fluid">

 <div class="col-md-7" id="first">
  <h1>First</h1>                                
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  </p>
 </div>

 <div class="col-md-5" id="second">
   <h1>Second</h1>
   <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>       
   <p>Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.</p>
 </div>

 <div class="col-md-7" id="third">
  <h1>Third</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>      
 </div>
</div>

更新:原始问题中遗漏了这一点，但如果可能的话，我试图在不隐藏(和重复代码)的情况下获得结果。

Answer 1

在第二个 div 上使用 pull-right 类。这将使它与其他列的右侧对齐。

<div class="container-fluid">
<div class="col-md-7" id="first">
  <h1>First</h1>                                
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  </p>
</div>

  <div class="col-md-5 pull-right" id="second">
  <h1>Second</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.
  </p>
  <p>
    Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.
  </p>
</div>

<div class="col-md-7" id="third">
  <h1>Third</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.
  </p>
</div>
</div>

更新:http://bootply.com/YJ1KxGIcBx