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.


<div class="container">
    <div class="region1">CONTENT1</div>
    <div class="region2">CONTENT2</div>


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

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

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

| improve this answer | |
  • Glad to help :) – Collins Mar 18 '14 at 10:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.