1

Hi I'm working in Bootstrap and I have 4 columns which I want to layout on larger screens like this:

_________________
|       |        |
|   1   |    2   |
|       |________|
|_______|        |
|       |    4   |
|   3   |________|
|_______|

on mobile the order must be this:

_________
|       |
|   1   |
|       |
|_______|
|       |
|   2   |
|_______|
|       |
|   3   |
|       |
|_______|
|       |
|   4   |
|_______|

The depths of the columns are governed by the content and no matter how I order my columns and rows I can't seem to achieve the larger screen layout without big spaces because rows or columns are clearing in a way I don't want them to, such as this:

_________________
|       |        |
|   1   |    2   |
|       |________|
|_______|________
|       |        |
|       |   4    | 
|   3   |        |
|_______|________|

that gap between cols 2 and 4 can be quite big if the content in col 1 is large. If I try and wrap the columns on the left in a column and the columns on the right in a column then the order on mobile is wrong as it will go

_________
|       |
|   1   |
|       |
|_______|
|       |
|   3   |
|_______|
|       |
|   2   |
|       |
|_______|
|       |
|   4   |
|_______|

I'm working in Bootstrap 4 alpha 6 but if you have an answer for Bootstrap 3 then that would help as well. I've tried the new card layout in Bootstrap 4 which doesn't quite work either. How do I do it?

Thanks.

Chris Cannon
  • 11
  • 2
  • The *order* of the columns can be controlled, but not the gaps. The only way to completely clear the gaps is with a "masonry" like layout. See my [answer here](http://stackoverflow.com/a/22311212/171456). – Carol Skelly Mar 15 '17 at 00:34
  • what if you just add a padding-bottom on that number 2 – Mark Gerryl Mirandilla Mar 15 '17 at 00:51
  • Is the layout exactly 4 columns, or would there be more? What is the content of the columns? Have you tried making the content (eg: Cards) full height to eliminate the gap? – Carol Skelly Mar 15 '17 at 04:26
  • Exactly 4 columns, using anything such as flex box to make columns equal won't help because there aren't any borders, backgrounds or graphical panels so the gap is still visible. I'll look into masonry thanks. – Chris Cannon Mar 15 '17 at 08:06

0 Answers0