根据窗口大小动态移动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>

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

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