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 theflexbox
modelflex-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
How to Add Background Image for Input Type="Button"
How to Make Images Stay Within the Rows of a CSS Grid Container
How to Render a Field Request Without Refreshing the Page
Customise Ng Bootstrap Carousel in Angular
Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre
Hidden Radio Button But Box Around It in IE8
Make CSS Drop Down Menu 2 Columns
Bootstrap Carousel Indicators Are Square; I Want Them Round
Delay HTML5 :Invalid Pseudo-Class Until the First Event
CSS Selector for Empty or Whitespace
How to Replace Color of Png Image Using CSS
How to Achieve Curved Top Pointer
Equal Width Using Flex and Border-Box