Bootstrap three column three row with third column spanned height - html

Question

I'm attempting to achieve the layout below using col-lg-4.
I just need to know how I can make the third column span all three rows and without creating enormous gaps of whitespace between the rows. Here's what it's currently looking like:
Is this possible to do in Bootstrap (without using the Bootstrap 2 span classes)?
Here's the code (generalized)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
<!-- THIS NEEDS TO ROW SPAN -->
<p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>
<p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>
<p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
<div class="col-lg-4">
Praesent laoreet purus in elementum.
</div>
</div>
</div>

Answer 1

You need to use nested col-s, in this case, use col-lg-8 + col-lg-4
and inside col-lg-8 you create nested cols using row
added col-xs-* for demo.
[class*="col-"] {
border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-lg-8">
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
<div class="row">
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
<div class="col-xs-6 col-lg-6">
Praesent laoreet purus in elementum.
</div>
</div>
</div>
<div class="col-xs-4 col-lg-4">
Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
</div>
</div>
</div>