dwinnbrown dwinnbrown - 7 months ago 28
HTML Question

Bootstrap divs don't stack

So I'm using bootstrap to achieve a grid type layout.

However when the XS class is applied (mobile devices) my two divs don't stack.

My first div is setup like this:

<div class="col-xs-12 col-md-3 pull-right" id="ad-container">
Content
</div>


And my second one like this:

<main id="content" class="col-xs-12 col-md-9 content-area" role="main">
Content
</main>


When i view it in mobile size, the
<main>
element simply sits directly ontop of the 'ad container'.

Could the
pull-right
be causing this?

Thanks

Answer

The pull-right seems to be the problem. To ensure that your content area comes on the left on bigger screens but is stacked below the ad container on mobiles use Column Ordering

<div class="row">
  <div class="col-xs-12 col-md-3 col-md-push-9" id="ad-container">
  Content
  </div>
  <div id="content" class="col-xs-12 col-md-9 col-md-pull-3 content-area" role="main">
  Content
  </div>
</div>

col-md-push-9 "pushes" the column to the right by 9 and col-md-pull-3 "pulls" the column to the left by 3 on "md" or greater screens.

Comments