Anyone know why this is happening?

[chelsea1124]

So I'm using bootstrap and i was making a team page for my website but when i size it this happens and i don't know how to fix it.

https://gyazo.com/b1a1c1a5c713e80c137273b392e1dbb6

 

[lAkjtzAZ0]

Are you asking why the columns become wider and are on their own line instead of side by side?

 

[chelsea1124]

Are you asking why the columns become wider and are on their own line instead of side by side?

Yes

i wanted the boxes to be like side by side when it drops then when on a phone it would all be on its own line[DOUBLEPOST=1507228047][/DOUBLEPOST]

Yes

i wanted the boxes to be like side by side when it drops then when on a phone it would all be on its own line

See it could be two in a row right here https://gyazo.com/7e37ddba623ac8dab7993cf2e4f39b9e

 

[lAkjtzAZ0]

It looks like you're using bootstrap columns, col-size-number. Bootstrap has several breakpoints setup for the majority of it's components to allow for responsive design, so it automatically changes depending on the width of the browser or device you're viewing on. You can override default bootstrap behavior, or write your own grid/column system depending on what you want to do. Here's a good tutorial on media queries.