How to make second div move to next line when browser resized

Question

I have 2 divs side by side and I want my second div to move down below of 1st div when browser is resized or viewed in mobile phones.

The divs that have issue are rn_PageContent and rn_SideBar

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Apr 04 '19 at 15:31

score 0 · Answer 1 · answered Apr 04 '19 at 16:06

0

This sounds like a job for a media query.

@media (max-width: 640px) {
  rn_PageContent, rn_SideBar {
    float: none;
    clear: both;
  }
}

answered Apr 04 '19 at 16:06

Nosnetrom

score -1 · Answer 2 · answered Apr 04 '19 at 15:30

-1

Remove float:right from rn_SideBar

answered Apr 04 '19 at 15:30

NoWayHandshake

Hello, tried it but it automatically goes to the next line even in normal size of the browser. :( – rome Apr 04 '19 at 15:46
Have a look at how to make a div responsive. And make the container div a responsive one. – NoWayHandshake Apr 05 '19 at 09:14

2 Answers2