How to place one region below the other while reducing the width in drupal 7? Currently, I am creating a single page responsive website in Drupal 7. After making the page responsive, I added a block with two regions: about us and ethics side by side that is in two columns. When reducing the browser width, the content still remains in two columns!!! I want the region about us to be below ethics, but I am not aware how to do it!! Can anyone guide me with the aforestated question.
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%}


}