Trying to reorder bootstrap columns with useful links in the row with the empty div and the lorem ipsum text below taking up 12 columns. Tried using clearfix and various column sizes but nothing is working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<div class="row">
<!--Links-->
<div id="content-left" class="col-xs-10 col-sm-10 col-md-4 col-md-offset-0">
<h2>Useful Links</h2>
<ul>
<li><a href="#">Link 1 Title</a></li>
<li><a href="#">Link 2 Title</a></li>
<li><a href="#">Link 3 Title</a></li>
<li><a href="#">Link 4 Title</a></li>
</ul>
</div>
<!--Links close-->
<div class="clearfix"></div>
<!--Content-->
<div id="content-right" class="col-xs-10 col-sm-10 col-md-12 col-md-push-0">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
<!--Content close-->
<!--Twitter-->
<div id="content-left" class="col-xs-10 col-sm-10 col-md-6 col-md-pull-6">
<h2>Twitter</h2>
</div>
<!--Twitter close-->
</div><!-- row close -->
</div>
2
Answers
pull and push is a good way to manage this, but this will only work on the same row because this will give the div
left
andright
property which does not create a new row. A solution (workaround) what I usually use is creating the twitter div 2 times. Like so:Two of your blocks (
links
andtwitter
) have the sameid="content-left"
. It’s wrong. Theid
must be unique.You can wrap
links
andcontent
into one additional block and apply negative margin to thecontent
.NB: This solution works if the height of the
twitter
block is not greater than the height of thelinks
block.Please check the result: