CSS でこれらのメディア クエリを使用して、フッターをレスポンシブにしています。
#footer-left画面を小さくしたときに、3 つの列 ( 、#footer-middle、#footer-right) が自動的に下に移動するようにしたい。
これを行う最良の方法は何ですか？ここにフィドルがあります：jsfiddle
/* for 980px or less */
@media screen and (max-width: 980px) {
#footer-left {
width: 41%;
padding: 1% 4%;
}
#footer-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
border-right:none;
}
#footer-right {
padding: 1% 4%;
}
#footer-bottom {
display:none;
}
}
/* for 800px or less */
@media screen and (max-width: 780px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#footer-right {
display: none;
}
}