title: How to move element above multiple containers in Bootstrap 3
body: <p>I'm building a website using Bootstrap 3.<br>
  Part of this site are 4 div-containers:<br></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="content" class="row"&gt;
          &lt;div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF"&gt;
              Menu
          &lt;/div&gt;
          &lt;div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="visible-md visible-lg col-md-12" style="background-color:#F08;"&gt;
                      Mod_1
                  &lt;/div&gt;
                  &lt;div class="col-md-12" style="background-color:#F80;"&gt;
                      Mod_2
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;"&gt;
              Main content goes here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Layout-View is shown here: </p>
  
  <p><a href="https://i.stack.imgur.com/X0qHR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X0qHR.png" alt="enter image description here"></a></p>
  
  <p><br>
  Code on <a href="http://jsfiddle.net/mB8QV/" rel="nofollow noreferrer">Fiddler</a><br><br>
  "Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
  <br><br>
  I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.</p>