Jonah McLachlan Jonah McLachlan - 3 months ago 10
HTML Question

Tuck Bootstrap columns under

I found this problem hard to describe in the title.

I have a

col-md-8
and a
col-md-4
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
col-md-8
div with content that I want to position beneath the other
col-md-8
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!

EDIT
I've just made a quick mockup in Balsamiq: Tablet: https://i.imgur.com/U5xC7g3.png Mobile: https://i.imgur.com/FvZG0IZ.png

Hope this makes sense

Answer

Demo

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>

EDIT:

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:

@media(min-width:750px){
  #bottom{
    margin-top:-850px
  }
}

Updated Demo

Comments