Change the order of items depending on the screen size
I have two floating <div>
.a
and .b
.
Both <div>
move to the left so that they both are horizontally aligned with a width 50%
for each.
But on a small screen I want both <div>
to be vertically aligned at full width, but the second must appear <div>
.b
first and the first <div>
.a
must appear below <div>
.b
.
Also I cannot set the height on both <div>
since their content is dynamic.
Below is a sample code:
.a{width:50%; float:left;background-color:#CCCCCC}
.b{width:50%; float:left; background-color:#FFC;}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left; background-color:#CCCCCC}
.b{width:100%; float:left; background-color:#FFC;}
}
<div class="a">This is first div</div>
<div class="b">this is Second div</div>
source to share
Okay, let's go into it. You want them to stay aligned at high resolutions, but inverted at mobile resolutions.
Mobile version: . Let's take a mobile approach. This means that we will support mobile styles as the default and include widescreen styles in the media query. This seems much simpler and smarter since your divs can be static in this case. Then it makes sense to make the second div the first:
<div class="section">Second div</div>
<div class="section">First div</div>
Not much styling then, just plain plain CSS for the mobile version. Mainly:
.section {
background-color: #f2f2f2;
}
Check out an example here: http://jsfiddle.net/arthurcamara/3yv2urkm/
Large screen version: I also took it upon myself to make the code more semantic. So I added some classes lg-right
and lg-left
in divs:
<div class="section lg-right">Text, second div</div>
<div class="section lg-left">Text, first div </div>
Now you add the media query.
@media only screen and (min-width: 481px) {
.section {
width: 50%;
}
.lg-right {
float: right;
}
.lg-left {
float: left;
}
}
See final working version here: http://jsfiddle.net/arthurcamara/3yv2urkm/2/
Additionally, you may need to use a framework like Foundation . They already provide this functionality much broader and more flexible than the one I presented.
source to share
Invert HTML Order:
<div class="b">this is Second div</div>
<div class="a">This is first div</div>
use float:right
initially:
.a{width:50%; float:right; background:#ccc}
.b{width:50%; float:right; background:#ffc;}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left;}
.b{width:100%; float:left;}
}
source to share
You can use the CSS3 flexbox order property like this:
HTML:
<div class="flex-parent">
<div class="flex-child a">This is first div</div>
<div class="flex-child b">this is Second div</div>
</div>
CSS
.flex-parent {
display:flex;
flex-wrap: wrap;
width:100%;
}
.flex-child {
flex:1;
}
.a {
background-color: #CCCCCC
}
.b {
background-color: #FFC;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.flex-child {
flex-basis:100%;
}
.a {
order:2;
}
.b {
order:1;
}
}
JSFiddle Demo
flexbox browser support @ caniuse
source to share