Bootstrap 3 - Change stack order using pull/push?

Question

I've got a stacking col with an image, title and description. On small screen (xs) i want the title to appear over the image and not beneath. Is it possible with bs 3 ?

Bootply example here

html

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-12 col-xs-12 col-xs-push-12 red"> Image </div> 
    <div class="col-sm-12 col-xs-12 col-xs-pull-12 blue"> Title </div> 
    <div class="col-sm-12 green"> Description </div> 
  </div> 
</div>

css

.red { 
    background-color : red;
} 
.green { 
    background-color : green;
} 
.blue { 
    background-color : blue;
}

There are two ways with CSS and one with jQuery. Push and pull work left to right. http://stackoverflow.com/a/27328292/1004312 — Christina, Dec 14 '14 at 06:52
possible duplicate of [reorder rows in bootstrap](http://stackoverflow.com/questions/27311260/reorder-rows-in-bootstrap) — Bass Jobsen, Dec 14 '14 at 08:16

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

On the first sight your question seems very similar to Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid). But that solution (and the *-pull- and *-push-* classes) only works when you want to interchange elements in a row which span together a 12 columns width. In your situation you have two elements which span 12 columns each and have each a width of 100%. Based on Swap DIV position with CSS only BS indeed does not offers a solution for your situation.

You can use jQuery (javascript) or create a duplicate red row and hide / show that with the responsive-utilities

edited May 23 '17 at 12:05

Community

1
1

answered Dec 14 '14 at 00:43

Bass Jobsen

48,736
16
143
224

I though so, Just wanted to make sure i'm not missing anything. I ended up adding two titles one with hidden-sm/lg/md on top and one on the bottom with hidden-xs. Stupid, no doubt, but does the trick. – haki Dec 14 '14 at 11:03

Bootstrap 3 - Change stack order using pull/push?

1 Answers1