Responsive grid with CSS and HTML

Question

I have been at this problem for hours.

I am looking to make my website responsive, I have started with mobile first and am working on creating it for the desktop.

My issue:

when I edit the .col for tablet or desktop, the columns will respond but they will not be on the same row.

When the breakpoint hits for the desktop I would like my picture to be to the right of the menu, and the content to be to the right of the picture.

if I make my

#menu{float:left} //under CSS desktop breakpoint

then i will get my desired result but the menu will lose it's column width.

any advice? I feel as if I am on the right track but something is not working.

tao · Accepted Answer · 2016-01-03 21:20:11Z

1

In order to achieve the desired outcome you need to:

Here's your fixed fiddle.

answered Jan 3, 2016 at 20:44

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

this isn't bootstrap, I've just followed w3schools.com/css/css_rwd_intro.asp It is just CSS and HTML

Sorry, there are quite a few similarities between your example and Bootstrap. I updated my answer.

Thank you! That fixed the problem