css - Switching the order of columns as rows in responsive bootstrap -


i'm wondering if trying achieve possible bootstrap. using bootstrap 3's push / pull arrange columns in row. i'm happy how things otherwise render in mobile view 1 exception. i'd have happen switch order of 2 columns render rows on mobile device - author , title.

see attached

http://bootply.com/109874

in mobile version, i'd position of author , title change. title appear on top of author in mobile view. thought achieved through push / pull. how can make happen?

you can't change stacked source order push , pull. think cleaner solution use responsive utilities:

http://jsbin.com/axihofah/1/edit

<div class="container">  <div class="row">    <div class="col-sm-8 col-sm-push-4">    <p class="visible-xs">title</p>    <p>author</p>    <p class="hidden-xs">title</p>     <p><img src="//placehold.it/460x340" class="visible-xs img-responsive"></p>    <p>description</p>   </div>   <!--./col-sm-8 col-sm-push-4-->    <div class="col-sm-4 col-sm-pull-8 hidden-xs">    <img src="//placehold.it/460x340" class="img-responsive">   </div>   <!--./col-sm-4 col-sm-pull-8-->   </div>  <!--./row --> </div> 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -