Bootstrap + html + jquery - basic layout skills and a couple of questions -?

Question

css

Hi all.
I'm new to web design, I have a few questions about site building that interest me.
actually the subject of the question codepen.io/spirit-infernal/pen/EjzZKW

questions:
1) markup. bootstrap is good in adaptability, which is why the choice fell on it, with the exception of one point that I did not find out in the documentation, and something obscure was suggested on stackoverflow - how to arrange blocks so that they do not form gaps? as in the example from the link above, for example, DIV7 should, in theory, go under DIV1 and to the left of DIV4. how to achieve such an effect? there was an idea to either do all the markup in two col-md-6 columns, inside which, already mark up blocks of the desired width. But here is the second question related to the first.
2) animation and possibly pseudo-elements. the markup is needed as described above, plus, in addition, it is interesting how to make an animated resizing of each element on click, so that it takes up the entire width (col-md-12), and a certain height, while maintaining the hierarchy of the location of other elements and decreasing in default dimensions when clicking on another element. I would like to see an example of the implementation of this on Jquery / JqueryUI, because they are already partially used in the project.

tell me either with a ready-made code with possible explanations, or links what to read. I would be grateful for both options.

Answer 1

1) masonry.desandro.com
2) haven't seen it, but there is
www.jsonenglish.com/projects/flex
gridster.net
Here's a good list: www.jqueryscript.net/tags.php?/Pinterest
Google "pinterest layout"