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
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.