title: Dynamic moving of HTML div depending on window size
body: <p>In trying to make a div change line if a window is too small to house three divs beside each other. Basically I have three divs beside each other in a container div.</p>
  
  <p>The behaviour right now is that if the windows get small enough, the right div will be moved down with the middle div above it. What I want is that if the window is small enough, the middle div should move below the left div instead.</p>
  
  <p>Skeleton HTML:</p>
  
  <pre><code>&lt;div class="level1"&gt;
      &lt;div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff"&gt;
          &lt;div class="level3-1"&gt;
              Stuff with dynamic length depending on ng-repeat
          &lt;/div&gt;
          &lt;div class="level3-2"&gt;
              Stuff with dynamic length depending on ng-repeat
          &lt;/div&gt;
          &lt;div class="level3-3"&gt;
              Stuff with dynamic length depending on ng-repeat
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Skeleton LESS CSS:</p>
  
  <pre><code>.level1 {
      .level2 {
          .level3-1 {
              float: left;
          }
  
          .level3-2 {
              float: left;
          }
      }
  
      .level3-3 {
          float: right;
      }
  }
  </code></pre>
  
  <p>So far I've tried to put <code>level3-1</code> and <code>level3-2</code> inside a div called <code>testdiv</code> but that didn't work either:</p>
  
  <p>Skeleton HTML:</p>
  
  <pre><code>&lt;div class="level1"&gt;
      &lt;div class="level2 clearfix" ng-if="stuff" ng-repeat="stuff"&gt;
          &lt;div class="testdiv clearfix"&gt;
              &lt;div class="level3-1"&gt;
                  Stuff with dynamic length depending on ng-repeat
              &lt;/div&gt;
              &lt;div class="level3-2"&gt;
                  Stuff with dynamic length depending on ng-repeat
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="level3-3"&gt;
              Stuff with dynamic length depending on ng-repeat
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Skeleton LESS CSS:</p>
  
  <pre><code>.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;
      }
  }
  </code></pre>
  
  <p>In the image below, I've tried do show the problem.</p>
  
  <p><a href="https://i.stack.imgur.com/HYDv7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HYDv7.png" alt="enter image description here"></a></p>
  
  <p>Anyone have a suggestion? Is it possible to do without Bootstrap?</p>