jquery - Forcing Bootstrap 3 mobile layout -

i have bootstrap 3 layout in wordpress site , loop brings in 2 different templates posts.

type 1

<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 posts have content on left, others have on right. posts stacked on top of each other.

on mobiles, want col-md-4 go under col-md-8. default bootstrap puts second div under first. on type 2 versions works fine. need on type 1 versions well. (i need keep col-md-8 on left, , col-md-4 on right in type 1 versions in screen sizes though)

you can reorder columns screen sizes. assuming want make cols full size , reorder them sm screen sizes, type 1 have 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