Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
Posted by David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

bootstrap grid problem

Ok here is the problem, I have 4 blocks (for the purpose of the problem I'll just call it blocks 1,2,3 and 4). at large screen widths I would like it arranged like so:

Block 1      Block 2
Block 3     Block 4

This is pretty easy:

<div class="row">
    <div class="col-lg-6">
      <div>Block 1</div>
      <div>Block 3</div>
    </div>
   <div class="col-lg-6">
     <div>Block 2</div>
     <div>Block 4</div>
   </div>
</div>

Now when I go to smaller screen widths I get an arrangement like so:

Block 1
Block 3
Block 2
Block 4

But what I want at smaller screen widths is:

Block 1
Block 2
Block 3
Block 4

Any advice?

2 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

David,

You've got it right in your codepen. I'd approach these as separate rows so you can better control them. You can also do it without the new row but the you could have issues with floats running into each other in that situation. Block 3 will never really fill the empty space created by something within another row like that... because the height of block 2 prevents that. You might consider something like the http://packery.metafizzy.co/ to do those types of layouts. This is also where doing a layout in Flexbox can be a lot easier for you. If this is just an experiment you might consider it an opportunity to checkout Flexbox or even look at the upcoming Bootstrap 4's optional Flexbox grid (depending on the users) at http://v4-alpha.getbootstrap.com/getting-started/introduction/

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Try to play around with col-xs-* col-sm-* col-md-* etc.. look how it affects the grid system and go on bootstrap page and look how the grid system works.

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

yea, I can split them into separate rows but then block 3 doesn't fill in the empty space left by block 2 http://codepen.io/djarrin/pen/yeBpgp