Forcing Bootstrap 3 mobile layout

1 Views

I have a Bootstrap 3 layout in my WordPress site and the loop brings in 2 different templates for my posts.

type 1

Read More
<div class="row">
    <div class="col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>
    <div class="col-md-8">
      <p>stuff</p>
    </div>       
</div>

type 2 

<div class="row">
    <div class="col-md-8">
      <p>stuff</p>
    </div>
    <div class="col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>       
</div>

Basically some posts have content on the left, others have it on the right. All the posts are stacked on top of each other.

On mobiles, I want the col-md-4 to always go under col-md-8. By default Bootstrap puts second div under the first. So on type 2 versions it works fine. But I need it do it on type 1 versions as well. (I need to keep col-md-8 on the left, and col-md-4 on the right in type 1 versions in screen sizes though)

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You can reorder your columns for certain screen sizes. Assuming you want to make cols full size and reorder them for sm screen sizes, type 1 would have to look like this:

    <div class="row">
    <div class="col-sm-12 col-sm-push-12 col-md-4">
        <h1>title</h1>
        <h3>sub</h3>
    </div>
    <div class="col-sm-12 col-sm-pull-12 col-md-8">
      <p>stuff</p>
    </div>       
</div>

    For more info, read on here: http://getbootstrap.com/css/#grid-column-ordering