Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Change the order of two HTML elements when viewed on mobile

Hi! I'm making a website using Bootstrap. On the desktop version, the order of the elements are logo on the top row, banner on next row, and navbar on next row. On the mobile version, I'd like to have the navbar collapse into a menu icon and have it next to the logo on the top row, followed by banner on the next row. So essentially, I'm changing swapping the order of the banner and the navbar in mobile. Anybody know of a way to do that with Bootstrap? I read somewhere that using Javascript to manipulate the DOM elements might work, any thoughts on that solution? Or does anybody have a CSS solution? Thanks!

1 Answer

The simplest would be using media queries and position:relative; into where you want it. If you know how to use both of these suggestions than you can make a perfect mobile menu.