Responsive grid layout

Responsive grid layout
0

#1

Hello,
I’m trying to get an image drop down in position when viewing the page on a smaller window. Using bootstrap I have a paragraph beside an image on the same row. When the window becomes smaller, the image stays on the same row and becomes too small to see.

can anyone take a look for me
thank you


#2

You’ve only set one size for the columns - they will always be half the width of the row (that’s what col-xs-6 means - from size extra small on up, they will be 6 columns wide in bootstrap’s 12 column grid layout).

You need to set the size you want them to be when the window is small (col-sm-12 perhaps?) then add a class that tells bootstrap to when make them half width (maybe col-md-6 … ?)

When to break the columns is up to you.

I suggest reading about the bootstrap grid:

http://getbootstrap.com/css/#grid

and CSS break points:

Hope that helps!
~Micheal


#3

Hi Michael,

Yes that helped a lot, makes sense now.

Thanks,

Josh


#4

I’m happy I could help!


#5

Bootstrap is currently the most popular web framework for developing responsive web applications. It offers a number of features and benefits that can improve your users’ experience with your web site. Check this useful link.

https://www.mindstick.com/Articles/1471/responsive-layout-using-bootstrap