How to make div s colapsáveis open without the buttons of the other div s descend?

Question

I’m making a portfolio gallery, based on Bootstrap so it’s responsive. So I have a set of thumbnails that will match a work that should be aligned:

By clicking on them open a collapsible DIV. I intend that when this div open, the other thumbnails of the same line remain in place:

And don’t come down when you click on one of them:

But this so that the order of the HTML tags is not changed so that it is possible that in small devices the layout is like this:

I would also like to know if there is any option to make it not only possible to open a div collapsible at a time.

This is my code: JSFIDDLE

Answer 1

Here is a suggestion:

var bigMedia = $(window).width() < 750 ? false : true;  // detectar se o ecrã é grande ou pequeno
$(window).resize(function () {
    bigMedia = $(window).width() < 750 ? false : true; // no caso de um resize do ecrã, detectar novamente
});
var conteudo;
$('.panel-heading').on('click', function () {
    conteudo && conteudo.slideToggle(function () { // se houver um conteudo aberto, fechá-lo
        $(this).remove();  // e removê-lo depois de fechado
    });    

    if (!bigMedia) $(this).parent().next().slideToggle('collapse'); // se for ecrã pequeno abrir como o HTML está
    else { // se for ecrã grande: 
        conteudo = $(this).parent().next().clone(); // fazer um clone do conteudo
        conteudo.attr('id', ''); // remover ID para não duplicar
        $(this).closest('.container').append(conteudo); // adicionár o clone ao fim de cada ".container"
        conteudo.slideToggle();  // abrir
    }
});

Example

Note that I removed all your Javascript and wrote new code.