How to Move an Element That's on the Top to the Bottom in Responsive Design

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

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

How can I move a div from top to bottom on mobile layouts?

This can be achieved using CSS' flexbox.

  • Add a new selector .col-xs-12 with the following properties:

    • display: flex; tells the children to use the flexbox model
    • flex-direction: column-reverse; will ensure that the children flow from bottom to top (instead of the default left to right)

Run the below Snippet in full screen and resize the window to see the order of the elements change.

@media only screen and (max-width: 960px) {

.col-xs-12 {

display: flex;

flex-direction: column-reverse;

}

}
<div class="row">

<div class="col-xs-12">

<div>TOP ON DESKTOP, BOTTOM ON MOBILE</div>

<div>BOTTOM ON DESKTOP, TOP ON MOBILE</div>

</div>

</div>

Swap DIV position with CSS only

Someone linked me this: What is the best way to move an element that's on the top to the bottom in Responsive design.

The solution in that worked perfectly. Though it doesn’t support old IE, that doesn’t matter for me, since I’m using responsive design for mobile. And it works for most mobile browsers.

Basically, I had this:

@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_div {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

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

This worked better than floats for me, because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of.

Responsive website: move header nav from top to bottom problems

Once your css is applied for @media screen it will carry on and apply the @media all as well. I think this is causing the problem. So I added css for top of the header and margin on the body, and that seemed to do the job.

    /* this is inside @media all */
header {
position:fixed;
top:0;
left:0;
display:block;
width:100%;
height:60px;
border-bottom:1px solid #108ac2;
box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
background:#fff;
opacity:.9;
}

header nav {
width:960px;
margin:0 auto;
}
/* this is inside @media screen and (max-width: 480px) */
header {
position:fixed;
bottom:0!important;
left:0!important;
top: initial;
}

header nav {
width:90%;
margin:0;
height:80px;
}
body {
margin:0 0 100px 0;
}

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}

.parent {

height: 100px;

border: 5px solid #000;

display: flex;

flex-direction: column;

}

.child {

height: 40px;

width: 100%;

background: #f00;

margin-top: auto;

}
<div class="parent">

<div class="child">Align to the bottom</div>

</div>

Responsive element positioning

The elements you mention is position:absolute, so by changing the top and left values, you can position them under the image

ex.

.artistname {
top: 92%;
left: 49%;
}

This isn't exactly the point of responsive design but it'll work for you.. Of course you' ll need media query for that.



Related Topics



Leave a reply



Submit