javascript - Swap divs (rows) only in tablet view -

i have 2 basic divs display side side in bootstrap layout. in using mobile first, have search panel div display first, followed div. in desktop mode, using push/pull correctly first div go right.

in middle view, tablet view, divs stacked, want swap order. i've created bootply: http://www.bootply.com/i8iuuyntwk#

in summary:

mobile:    [search]    [slideshow]  tablet:    [slideshow]    [search]  desktop:    [slideshow] [search]   <div class="container">     <div class="row">         <div id="search_div" class="col-md-3 col-md-push-9">             search form here (this should on right on desktop, on top mobile, , second tablet)         </div>         <div id="slideshow_div" class="col-md-9 col-md-pull-3">             slide show here  (this should on left desktop, second mobile , on top tablet)         </div>     </div> </div> 

i've seen dozens of ways attempt far seem odd, not clean. i'd rather not duplicate divs , hide show.

you can reorder them in tablet screen size using flex reordering. check compatibility table flexbox

1. include @media (min-width: 768px) , (max-width: 992px) target tablet screen size width.

2. use custom class row avoid affecting rows.

3. make sure flex-direction set column stacking effect.

#search_div {    background: yellow;    padding: 30px;  }  #slideshow_div {    background: red;    padding: 40px;  }  @media (min-width: 768px) , (max-width: 992px) {    .reorder {      display: flex;      flex-direction: column;    }    #search_div {      order: 2;    }    #slideshow_div {      order: 1;    }  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <div class="container">    <div class="row reorder">      <div id="search_div" class="col-md-3 col-md-push-9">        search form here (this should on right on desktop, on top mobile, , second tablet)      </div>      <div id="slideshow_div" class="col-md-9 col-md-pull-3">        slide show here (this should on left desktop, second mobile , on top tablet)      </div>    </div>  </div>