ウィンドウサイズに応じてHTML divを動的に移動する

Question

ウィンドウが小さすぎるとdiv divを変更すると、ウィンドウが小さくなりすぎて3つのdivが互いに隣接して格納されません。基本的には、コンテナdiv内に3つの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> 

スケルトンLESS CSS：どちらか

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

     .level3-2 { 
      float: left; 
     } 
    } 

    .level3-3 { 
     float: right; 
    } 
} 

は、これまでのところ、私はdivの内側にlevel3-1とlevel3-2を入れてみましたtestdivと呼ばれるが、それは動作しませんでした：

スケルトン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> 

スケルトン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; 
    } 
} 

、私は問題を示さない試みました。

誰でも提案がありますか？ブートストラップなしでもやり遂げることは可能ですか？

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>