CODEWITHSUNDEEP
htmlcss
Dimitrije M
Dimitrije M

Reputation: 383

Responsive grid with CSS and HTML

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.

https://jsfiddle.net/Lrtpjhh7/

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

Upvotes: 1

Views: 65

Answers (1)

tao
tao

Reputation: 90277

In order to achieve the desired outcome you need to:

  1. Wrap whatever you want displayed near the menu inside a col-9 wrapper.
  2. Add float:left to your [class^="col-"].

Here's your fixed fiddle.

Upvotes: 1

Related Questions