When browser width becomes under 600px, I'd like such a position change, thanks to a media query :
It seems that this would need to swap div position. Is this possible with CSS?
* { padding: 0; margin: 0; }
#a { float: left; background-color: red; width: 150px; }
#b { background-color: blue; }
#c { float: right; width: 40%; background-color: yellow; }
@media (max-width: 600px) {
/* ... */
}
<div>
<div id="a">a</div>
<div id="c">c</div>
<div id="b">b</div>
</div>
You only need to reset the float or width properties.
Do mind the BFC block formating context when you deal with floating and non floatting elements.
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
* {
padding: 0;
margin: 0;
}
#a {
float: left;
background-color: red;
width: 150px;
}
#b {
background-color: blue;
}
#c {
float: right;
width: 40%;
background-color: yellow;
}
@media (max-width: 600px) {
#c {
width: 100%;
}
}
<div>
<div id="a">a float</div>
<div id="c">c float or not</div>
<div id="b">b</div>
</div>