My webpage currently has two columns, left and right. However, I want the right column to appear above the left one when the window size is reduced.
Currently, as the window shrinks, the right column drops down below the left column instead of moving above it.
Is there a way for me to make the right column shift to the top of the left column when the window size decreases?
You can view my code on this fiddle: http://jsfiddle.net/1m6n2dz8/1/
.descright {
float: right;
width: 40%;
}
.descleft {
float:left;
width:60%;
}
.group {
margin:0 6%;
}
@media screen and (max-width: 480px) {
.descleft, .descright {
float: none;
width: auto;
}
}
I would really appreciate any guidance on how to achieve this desired layout adjustment!