0

I know how to change stack order using push-pull classes, but as far as I know (and tried) it only works if you have two columns. In my design I have a container with a box nested floating on the top-left. I would like it to be under the container content when viewing on mobile.

Here is a sketch of how it is on desktop: https://db.tt/nZGvCih0

And this is how I want it to look on mobile: https://db.tt/Td6PlwT5

Right now the box is on top of the container content.

(I'm using Bootstrap 3 and prefer not to use js)

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Lulu
  • 438
  • 5
  • 15

2 Answers2

0

I think you can hide divs and display another div while loading on smaller devices .Check this link out it may help you http://getbootstrap.com/css/#responsive-utilities

Thanks

sunilkjt
  • 985
  • 4
  • 12
  • 21
0

Which you are seeking is a 'float: bottom' css and alas my friend, there is none (Ref: How can I position my div at the bottom of its container?).

There are several alternatives which you can consider:

  1. Create two divs 'content', one for mobile and one for desktop. You can hide them respectively by using the responsive utilities mentioned by @sunilkjt.
  2. Use CSS3 responsive media queries to do a 'position: absolute' on the div 'box' when on mobile, hence placing it at the bottom.

If you provide us with your html/css, i can create a jsfiddle that suits your needs.

Community
  • 1
  • 1
Mysteryos
  • 5,581
  • 2
  • 32
  • 52