12

I have the following HTML format, what is the efficient way to position the given element on the top on a desktop and bottom on mobile devices (width < 640pixels)? Since there are lots of different devices, I don't want to write the position coordinates since the contents of the page's height varies. Any suggestions?

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
Suthan Bala
  • 3,209
  • 5
  • 34
  • 59

4 Answers4

25

Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn't great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it.

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).

cimmanon
  • 67,211
  • 17
  • 165
  • 171
5

Better compatibility than flexbox can be achieved with display: table-footer-group (IE8+)
Reverse effect: to move an element higher than it is in the HTML code, you can try table-caption and table-header-group.

Doesn't work with self-replaced elements like img or input, at least on Chrome (and that's quite normal) but fine with div for example.

EDIT: it's 2016 so Flexbox (and Autoprefixer) all the things \o/

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
1

I don't know if it's the best approach, but you could replicate the same element where you want it and play with the display: none/display: inline-block attribute. When it's viewed on desktop, your css tells it to display the one on top and not the one at the bottom. Then, when viewed on mobile, it should not display the one on top and display the one at the bottom.

Like I said, I'm not sure this is the most efficient way of doing it, but it does work. If anyone else has a better solution, I'd love to hear it.

c.millasb
  • 86
  • 4
0

I assume when you say "postion" you mean so that it doesn't move when you scroll. In that case you could use:

p.className {
  position: fixed;
  bottom: 0; // for mobile devices
  top: 0; // for desktops
}

Where p element gets a class attribute like this:

<p class="className">I am on the...</p>

bottom & top would not exist at the same time you would need to load the relevant one based on the device. For the desktop you would also need to offset your content with the height of the div so that it isn't hidden under the fixed div

Precastic
  • 3,742
  • 1
  • 24
  • 29