根据窗口大小动态移动HTML div

如果一扇窗户太小，无法容纳三个并排摆放的沙发，那么在尝试制作沙发更换线时。基本上，在一个容器div中，我有三个div并排放置

现在的行为是，如果窗口变得足够小，右div将向下移动，中间div位于其上方。我想要的是，如果窗口足够小，中间的div应该移到左div的下方

框架HTML：

<div class="level1">
    <div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff">
        <div class="level3-1">
            Stuff with dynamic length depending on ng-repeat
        </div>
        <div class="level3-2">
            Stuff with dynamic length depending on ng-repeat
        </div>
        <div class="level3-3">
            Stuff with dynamic length depending on ng-repeat
        </div>
    </div>
</div>

<div class="level1">
    <div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff">
        <div class="testdiv clearfix">
            <div class="level3-1">
                Stuff with dynamic length depending on ng-repeat
            </div>
            <div class="level3-2">
                Stuff with dynamic length depending on ng-repeat
            </div>
        </div>
        <div class="level3-3">
            Stuff with dynamic length depending on ng-repeat
        </div>
    </div>
</div>

到目前为止，我已尝试将

level3-1

和

level3-2

放在名为

testdiv

的div中，但这也不起作用：

框架HTML：

<div class="level1">
    <div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff">
        <div class="level3-1">
            Stuff with dynamic length depending on ng-repeat
        </div>
        <div class="level3-2">
            Stuff with dynamic length depending on ng-repeat
        </div>
        <div class="level3-3">
            Stuff with dynamic length depending on ng-repeat
        </div>
    </div>
</div>

<div class="level1">
    <div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff">
        <div class="testdiv clearfix">
            <div class="level3-1">
                Stuff with dynamic length depending on ng-repeat
            </div>
            <div class="level3-2">
                Stuff with dynamic length depending on ng-repeat
            </div>
        </div>
        <div class="level3-3">
            Stuff with dynamic length depending on ng-repeat
        </div>
    </div>
</div>

在下面的图片中，我试着展示这个问题

有人有什么建议吗？可以不使用引导吗？

.level1{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
最大宽度：900px；
背景颜色：蓝色；
}
.2级{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
背景色：红色；
}
.level3-1、.level3-2、.level3-3{
宽度：150px；
高度：150像素；
背景颜色：粉红色；
边框：2个黑色实心；
}

具有动态长度的填充取决于ng重复
具有动态长度的填充取决于ng重复
具有动态长度的填充取决于ng重复

希望就是你要寻找的。对不起，它根本不起作用。首先，

level3-1

和

level3-2

不能具有固定的宽度或高度。内容来自角度控制器，应该尽可能长地在一条线上。其次，

level3-3

需要在

level2

内，才能包含在

ng repeat

中。此外，我意识到在其中一个重复中，有第四个div应该完全位于该行的下方，这取决于另一个

ng if

。在你的解决方案中，div只能放在

level3-3

的右边。我给出了一个高度和宽度来测试它，这并不意味着你必须这样做，但如果这不是你想要的，那么我不知道，因为我测试过它，它完全符合你的要求，但如果不是很抱歉，我也帮不了你我也测试了它，当我只有你建议的东西时，它工作正常，问题是它在实际页面上不工作。不幸的是，我不得不使用框架代码来回答这个问题，因为实际内容是保密的。