Responsive grid layout

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

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:

and CSS break points:

Hope that helps!

Hi Michael,

Yes that helped a lot, makes sense now.



I’m happy I could help!

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.