Jonah McLachlan Jonah McLachlan - 1 year ago 78
HTML Question

Tuck Bootstrap columns under

I found this problem hard to describe in the title.

I have a

and a
classed div. This provides me a nice sidebar style layout. Therefore when it wraps on a smaller device it will stack. However I have another
div with content that I want to position beneath the other
However beacause bootstrap is the way that it is, it tends to treat it as rows.

View my codepen mockup that I've made. (Basically I want the lower paragraph to meet the top-most paragraph and then be pushed down by my sidebar.) Is this possible? Thanks!

I've just made a quick mockup in Balsamiq: Tablet: Mobile:

Hope this makes sense

Answer Source


Use col-md-push-* and col-md-pull-*

  <div class="col-md-4 col-md-push-8">Sidebar</div>
  <div class="col-md-8 col-md-pull-4">Top Content</div>
  <div class="col-md-8 col-md-pull-4">Bottom Content</div>


Okay you want the paragraphs touching on desktop but the menu between them on mobile. So using your original code, you can add an id to the bottom col-md-8 and use a custom media query like:


Updated Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download