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
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
Post a Comment