title: Change div position depending on screen resolution (flexbox?)
body: <p>this is what I am trying to achieve (images added below). I know that this can be done with media queries and its just adding different styles depending on the screen resolution. What i have for now is the smartphone version (presented below). </p>
  
  <p>I cant figure out how i can put those two boxes ABOVE the "mytextbox" div on the version for tablets. I was trying different combinations with grid, pull-right/left etc and it doesnt seem to work. I just started reading about flexbox. Maybe thats an option here? If you have any ideas please help. Thank you!</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div id="mytextbox" class="col-sm-12 col-xs-12"&gt;Text from the box&lt;/div&gt;
          &lt;div id="box1" class="col-sm-6 col-xs-3 mybox"&gt;BOX NAME1&lt;/div&gt;
          &lt;div id="box2" class="col-sm-6 col-xs-3 mybox"&gt;BOX NAME2&lt;/div&gt;
          &lt;div id="box3" class="col-sm-6 col-xs-3 mybox"&gt;BOX NAME3&lt;/div&gt;
          &lt;div id="box4" class="col-sm-6 col-xs-3 mybox"&gt;BOX NAME4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On tablet:</p>
  
  <p><a href="https://i.stack.imgur.com/R16rX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R16rX.png" alt="enter image description here"></a></p>
  
  <p>On smartphone:</p>
  
  <p><a href="https://i.stack.imgur.com/KLZcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KLZcZ.png" alt="enter image description here"></a></p>