What is the best way to move an element that's on the top to the bottom in Responsive design

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>

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).

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/

What is the best way to move an element that's on the top to the bottom in Responsive design

Related

Recent Posts