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

Question

如果窗口太小无法容纳彼此并排的三个 div，则尝试制作 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>

无骨架 CSS:

.level1 {
    .level2 {
        .level3-1 {
            float: left;
        }

        .level3-2 {
            float: left;
        }
    }

    .level3-3 {
        float: right;
    }
}

到目前为止，我已经尝试将 level3-1 和 level3-2 放在一个名为 testdiv 的 div 中，但这没有用要么:

骨架 HTML:

<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>

无骨架 CSS:

.level1 {
    .level2 {
        .testdiv {
            display: inline-block;
            word-wrap: break-all;
            /* also tested break-word */
        }

        .level3-1 {
            float: left;
        }

        .level3-2 {
            float: left;
        }
    }

    .level3-3 {
        display: inline-block;
        float: right;
    }
}

在下图中，我已尝试显示问题。

有人有什么建议吗？可以不用 Bootstrap 吗？

Answer 1

.level1 {
  display:flex;
  flex-direction: row;

  justify-content: space-between;
  max-width: 900px;
  background-color: blue;
   }
.level2 {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;

  background-color: red;
}
.level3-1, .level3-2, .level3-3 {
  width: 150px;
  height: 150px;
  background-color: pink;
  border: 2px black solid;
}

   <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>
       <div class="level3-3">
         Stuff with dynamic length depending on ng-repeat
       </div>
   </div>