How to place one region below the other while reducing the width in drupal 7?
You can either use float:left on both elements with fixed widths that will automatically stack when the page width is reduced enough.

Or use a CSS media query to make the regions adapt once a certain screen width is reached.

HTML:

&lt;div class="container"&gt;
    &lt;div class="region1"&gt;CONTENT1&lt;/div&gt;
    &lt;div class="region2"&gt;CONTENT2&lt;/div&gt;
&lt;/div&gt;


CSS:

.container {width:100%}
.region1 {width:50%}
.region2 {width:50%}

@media only screen and (max-width: 767px) {

.region1 {width:100%}
.region2 {width:100%}


}