Making the 4 box responsive - html

Question

html
<footer>
<div class="Footer_Container">
<div class="Footer_Rows">
<div class="span3" id="sspan1">
<h5>CONTACT</h5>
<ul>
<li>chris#pagemotion.com</li>
<li>(03) 013 3134114</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan2">
<h5>FOLLOW</h5>
<ul>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan3">
<h5>VISIT</h5>
<ul>
<li>6700 N New York Ave Suite 233 Portland, OR 97203</li>
</ul>
</div><!--end of span-->
<div class="span3" id="sspan4">
<img src="Image/mylogo.png" class="mylogo">
<!-- <img src="Image/rdio-icon.png" class="sg"> -->
</div><!--end of span-->
</div><!--end of FooterRows-->
</div><!--end of FooterContainer-->
css
footer{
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container{
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows{
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3{
width:16%;
position:relative;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5{
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul{
margin:0;
padding:0;
list-style:none;
}
.span3 ul li{
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a{
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
#sspan1{
margin-left:10px;
}
#sspan4{
margin-left:10px;
}
.mylogo{
width:150px;
height:100px;
}
please copy and paste i cant put link here , i want to make this responsive , which will be 2 box on top , 2 box on bottom . but i have no idea how to make it can any one show me how ?
so is like this:
A B
C D
thank ~

Answer 1

Are you looking for something like this?
http://jsfiddle.net/62uzV/
.span3{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
footer {
width:100%;
height:100%;
min-height:150px;
padding:30px 0 80px;
color:#fff;
font-size:14px;
line-height:1.6;
background:#222;
position:relative;
}
.Footer_Container {
max-width:1080px;
width:86%;
min-height:150px;
padding-right:10px;
padding-left:10px;
margin:0px auto;
/*box-sizing:border-box;*/
display:block;
background-color:red;
}
.Footer_Rows {
margin-right:-10px;
margin-left:-10px;
padding:25px;
overflow:auto;
/*margin:0px auto;*/
}
.span3 {
width:50%;
padding-right:30px;
padding-left:30px;
min-height:1px;
float:left;
font-size:14px;
color:#fff;
font-family:"colfax-web";
background-color:blue;
}
.span3 h5 {
margin:0 0 10px;
font-size:16px;
font-style:normal;
}
.span3 ul {
margin:0;
padding:0;
list-style:none;
}
.span3 ul li {
display:list-item;
/*text-align:-webkit-match-parent;*/
box-sizing:border-box;
}
.span3 ul li a {
font-size:14px;
font-family:"colfax-web";
color:#fff;
text-decoration:none;
-webkit-trasition:all .2s ease-in-out;
transition:all .s2 ease-in-out;
}
.mylogo {
width:150px;
height:100px;
}