Javascript 在马赛克中较小图像下方显示全宽div

我有一个带有马赛克图像的HTML结构：每行4个图像

当我点击一个图像时，我想在图像所在行的下方显示一个全宽div

我需要让那个元素（

.div充满
）保持在流中

下面是一个模式：


我尝试过绝对定位，但元素当然不在流程中

.div-full-with {
        background-color: #333;
        position: absolute;
        left: 0;
        right: 0;
        height: 100px;
        top: 30px;
      }  

我尝试了一些其他技术（计算等），但我无法实现这一点

如果结构是静态的，那就很容易了。但我在一个循环中，我必须在这样的模板中创建它，其中只有一个元素：

<div class="col-md-3">

    <img src="..."/>

    <div class="hidden-div">some content in full width</div>

</div>


有些内容是全幅的
您需要在JavaScript中设置一些断点，以确定行中特定宽度的列数。如果您使这些断点与CSS中的断点重叠，则会有所帮助。然后单击某个元素时，根据当前断点确定应在何处添加一个全宽元素，该元素跨越一行中的所有列。@EmielZuurbier好的，我曾希望用基本html/css找到一个简单的解决方案，但似乎不可能。当我看到这个网络模型时，我没有意识到编写代码会很困难。是的，它需要一些JavaScript。但这并不意味着一定要困难。像这样想。宽度为X时，有3列。因此，如果你点击一个图像，在每乘以3之后，你应该临时添加你的全宽元素。在第3、6、9列之后，等等，我已经读过了，你说过你总是在一行中有四个项目。这样，您不必进行任何计算，只需将高度为
0
的全宽元素设置为默认值，并在单击该行中的某个元素时将其设置为特定高度的动画。仍然需要JS，但要容易得多。@EmielZuurbier谢谢。你的评论帮助了我，我知道我能做些什么。我太专注于html/css了。