How do I make rows appear beside each other on desktop, but under each other on mobile? (Bootstrap)

I’ve been trying to figure this out for days and decided its time to call in the calvary, haha. I had my portfolio almost entirely done, but decided to start from scratch because I felt like my bootstrap was kind of duck-tapped together to achieve what I wanted.

Basically, the title says it all. I want my these rows to appear beside eachother on larger screens, but under eachother (in this order) on mobile. Can anybody help me? Thanks!

Hey @P1xt, thanks for your reply. I do understand the basics of the bootstrap grid, but I can’t figure out how to do this specific thing. The problem is, if I put both the headers in one row, and both the paragraphs in another row, then they appear side by side like I want them to, but when it collapses in mobile they are in the wrong order. Am I explaining myself clearly? It’s hard to articulate into words.

Think of the ‘row’ as the unit that contains both a single header and paragraph combination. So the layout looks more like:

row
----col containing header, xs-12, md-6
----col containing paragraph, xs-12, md-6

new row
----col containing header, xs-12, md-6
----col containing paragraph, xs-12, md-6

That should behave the way you’re describing.

1 Like

@JacksonBates, thanks for your input. I tried that during my struggles but to no avail. I’ll try and visualize what I want:

Sorry, you’re right - I wasn’t concentrating! Gimme a minute to get back to my computer :slight_smile:

Do you mean more like this:

http://codepen.io/Malgalin/pen/akjzzz?editors=1000

You only need ONE row, since at the widest setting it is only one row (I assumed the dog goes in the same row).

So the layout is:

row
----heading, xs 12, md4
----paragraph, xs12, md4
----heading, xs 12, md4
----paragraph, xs12, md4
----heading, xs 12, md4
----paragraph, xs12, md4
end row
2 Likes

Yes! Exactly. You’re the man, thanks so much. I can’t believe I didn’t try that, haha.

One good rule of thumb (and I wish the bootstrap docs stressed this point) is to see the col-xs-* class as “always this many columns”. For most applications, you should use col-md-* classes, let it fall back to single-column on smaller devices, then tweak to fit.

FCC’s challenges that introduce bootstrap use col-xs-* for reasons of looking consistent (it’s hard to explain multiple columns when it renders as a single column on some screens), but it’s not the default you should reach for.