How do I get divs to vertically align in the most compact manner?

Question

Edit

As to why I need this behaviour, having my content in a single div means that all of the content is in chronological order on both the web page and in the html. This means that when the content is shown on a small screen and the columns collapse into a single one, the content is still in chronological order.

                1 div -->  1                2 divs  -->  1
                1 | 2      2                1 | 2        3
                3 | 4      3                3 | 4        5
                5 |        4                5 |          2
                           5                             4

---

On my website I have two columns of content, each taking up 50% of the width. The content is organised into boxes which can be toggled to hide/show content when you click on their header.

When a box on the right is minimised, the box below it fills the gap that was created, leaving the correct spacing:

However when a box on the left is minimised a gap is left between it and the next box, relative to the size of the neighbouring box on the right:

Some pseudo code for the div arrangement:

<div class="full_width">
    <div class="box">       <-- box 1
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">       <-- box 2
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">       <-- box 3
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
</div>

It is my understanding that in this case box 3 will can not be positioned above the bottom of box 2 due to the order of content in the html, is there any way around this?

I'd be happy with a javascript solution as this can only be a problem on pages that have javascript enabled.

Notes

-You'll need javascript and a monitor wider than 1000px to view the issue live on my website as the columns collapse into 1 below that width and the hide/show functionality is provided by javascript.

-I could get around this by having two separate columns of content which cannot change sides, however that is not the functionality I want.

Answer 1

Why not leverage CSS3 columns? The benefit of the below is they will also collapse responsively at lower screen sizes (you'll likely want to change the below to suit our purposes):

HTML

<div class='full_width'>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
</div>

CSS

html, body {
    width:100%;
    margin:0;
    padding:0;
}
.full_width{
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-count: 2;
}
.box{
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width:100%;
    box-sizing:border-box;
}
.box(:first-of-type) {
    margin: 20px 0;
}

Answer 2

I wrote this function and call it when the page first loads, and then whenever a box finishes changing size, a surprisingly simple function.

function column_align() {
    $('.box').each(function() {
        // if box on left of screen
        if ($(this).offset().left < 50) {
            $(this).css("float", "left");
        } else {
            $(this).css("float", "right")
        }
    });
}

Where before we had this alignment problem:

The boxes fit snugly, and in the correct order down the page:

Answer 3

I don't understand why you don't want 2 separate divs, one per column ? This would work only on CSS-side, and you either would be able to invert left to right.