css - How to pull image on top for small only with bootstrap? -


i have column has little blurb of text , on right hand side (in of size), small image.

on mobile screens, pull small image on top. have tried different variations of bootstrap classes below , cannot seem pull/push mobile appears on top blurbs of text below on mobile

<div class="row">     <div class="col-xs-12">         <div class="row">             <div class = "col-xs-12 col-xs-push-12 col-sm-9 col-sm-pull-9 text-right main-block">                 <div class = "col-xs-11 pull-right h1 quote">                     hey, @ text!!                  </div>                 <div class="col-xs-12 text-right attribute h2">-some more text</div>                 <div class="col-xs-12 text-right attribute">txt</div>             </div>             <div class="col-xs-12 col-xs-pull-12 col-sm-3 col-sm-push-3">                 <img class ="top-right-round parallel-corner" src="http://placehold.it/350x350">             </div>         </div>     </div> </div> 

think mobile first! move image above text. on larger screens, pull/push column alignment.

<div class="row">     <div class="col-xs-12 col-sm-3 col-sm-push-9">         <img class="img-responsive" src="http://placehold.it/350x350" />     </div>     <div class="col-xs-12 col-sm-9 col-sm-pull-3">         <div class="col-xs-12">hey, @ text!!</div>         <div class="col-xs-12">some more text</div>         <div class="col-xs-12">txt</div>     </div> </div> 

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -