I'm sure there is a simple answer to this question. Instead of having the left div appear first on mobile (media queries), as it naturally would, how would I make the right div appear first instead?
The left div would appear first on desktop view.
<style>
.left {
width:27%;
float:left;
}
.right {
width:70%;
float:right;
}
</style>
<div id="tier-1">
<div class="left"></div>
<div class="right"></div>
</div>
Just write the right div first.
Use a media query. Like this:
@media (max-width 500px){
.right{
float: left;
}
}
Of course, 500px could be anything. Chrome developer tools let you emulate different sizes and even have some preset phone resolutions. Nonetheless, You could completely change how everything is formatted with media queries.
by using media queries we can change the css value of all the html elements. commonly media queries are write in 4 common screens . also customization is possible .
@media only screen and (min-width : 1200px) {
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}@media only screen and (min-width : 1200px) {
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
}for mobile device 767(landscape) and 479(portrait). use below media query for your question.
@media only screen and (max-width: 479px) {
.left {
width: 27%;
float: left;
height: 50px;
background-color: #393318;
color: #fff;
text-align: center;
}
.right {
width: 70%;
float: right;
height: 50px;
background-color: green;
color: #fff;
text-align: center;
}
@media only screen and (max-width: 479px) {
.right {
float: left;
}
.left {
float: right;
}
}
}<div class="left">leftdiv</div>
<div class="right">right div</div>Thank you everyone for your contributions, but I ended up finding a solution on this URL: Use CSS to reorder DIVs
I used the CSS3 Flexbox Layout Module. Thank you again!
