0

I have a problem regarding positioning, ordering and breaking divs for mobile.

enter image description here Above is a simplified image of a layout I currently have. The issue is with the whitespace above description section which happens due to higher main section.

I'd like for it to go up and fill empty space.

Also, I need to break it into mobile view like this (each 100% width):

Main Gallery Description Amenities

This I can achieve with flexbox, or lost grid, or any other ordering, but then I can't get rid of whitespace.

I've tried flexbox positioning, float positioning, lost-column positioning, css3 columns, but I'm now out of ideas.

Here's a Fiddle for Flexbox example which doesn't solve the issue but shows the problem and general idea.

In example:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper__item {
  flex: 0 0 50%;
  border: 1px solid gray;
}

Any ideas?

Sebastijan Dumančić
  • 1,165
  • 1
  • 11
  • 20
  • CSS columns can do something like that https://jsfiddle.net/1fxfnr6y/5/ – Asons Oct 04 '17 at 13:52
  • And using a fixed height, it can be done using Flexbox columns https://jsfiddle.net/1fxfnr6y/6/ – Asons Oct 04 '17 at 13:54
  • Content has dynamic height so it's not an option. Columns look like what I was looking for, but I'm not sure they are able to break as needed, since I need source ordering as well @LGSon – Sebastijan Dumančić Oct 04 '17 at 14:04
  • The dupe link has more options – Asons Oct 04 '17 at 14:08
  • @LGSon None of the solutions are what I'm looking for. Columns do it top-to-bottom first, which breaks the ordering which is needed for responsive breaks, others don't handle whitespace well. – Sebastijan Dumančić Oct 05 '17 at 07:18

0 Answers0