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

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

#1

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!


#3

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.


#4

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.


#5

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


#6

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


#7

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

#8

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


#9

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.