Fixed responsive layout

Fixed responsive layout

HTML

<h3> Fixed-Responsive: </h3>
<div class="centered">

<div class="leftHalf">
<p>I will fill up the left column of 130px most of the time, but if the screen gets too small, only one column will exist. I will be 200px, red, and on top.</p>
</div>
    
<div class="rightHalf">
<p>I will fill up the right column of 130px most of the time, but if the screen gets too small, only one column will exist. I will be 200px, blue, and on bottom.</p>
</div>

</div> <!-- centered -->

CSS

/* Normally, this will look just like the Fixed-Only example */
.leftHalf{ width: 130px; float: left; padding-right: 10px;}
.rightHalf{ width: 130px; float: left; padding-left: 10px;}

.centered{ width:300px; margin: 0 auto;} 

/* When the window is less than 300px, the new css rules will be applied */
@media (max-width: 300px){
    .leftHalf{ 
        width: 200px; 
        color: red; 
        margin-left: 20px; 
        padding: 0px; 
        float:none 
    }
    .rightHalf{ 
        width: 200px; 
        color: blue; 
        margin-left: 20px;  
        padding: 0px; 
        float:none 
    }
}