title: CSS styling: move div tag position via CSS
body: <p>I have a div container that displays content depending user status (logged in, anonymous). On each case, I need to move the bottom div below the content div, via CSS only. For example, for logged in user, I need to display both divs (.loggedInBottom, and .loggedIn), and .loggedInBottom div below .loggedIn div. I cannot move the div, but can change CSS to do so.</p>
  
  <p>Both *Bottom divs need to have the same background colour as the container.</p>
  
  <p>Web browser support: IE9+, FF, Chrome.</p>
  
  <p>Any idea? Please provide cod. thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;style type="text/css"&gt;
          /*
          Problem:
          1: When loggged in, 1 needs to move below 4 via CSS only, not move div tag
          2: Same as 1 above, Wwen not logged in, 2 needs stop move below 3 via CSS only
  
          */        
            .hide {
                display: none;
            }
            .container{
                background-color:grey;
                width: 300px;
                height: auto;
            }
            .loggedIn{ 
                height: auto;       //the height varies from time to time
             }
            .loggedInBottom{}
  
            .anonymous{}
            .anonymousBottom{}
   &lt;/style&gt;
    
   
        &lt;p&gt;Logged In&lt;/p&gt;
        &lt;div class="container"&gt;
            &lt;div class="loggedInBottom"&gt;bottom: When users are logged&lt;/div&gt; &lt;!--1 needs to move below 4 via CSS only--&gt;
            &lt;div class="anonymousBottom hide"&gt;bottom: anonymous users&lt;/div&gt; &lt;!--2 --&gt;
            &lt;div class="anonymous hide"&gt;Content: anonymous users&lt;/div&gt; &lt;!--3 --&gt;
            &lt;div class="loggedIn"&gt;content: When users are logged. the height varies from time to time&lt;/div&gt; &lt;!--4 --&gt; &lt;!-- need to move this div tag to above 1 via CSS only  --&gt;
        &lt;/div&gt;
  
        &lt;p&gt;anonymous users&lt;/p&gt;
        &lt;div class="container"&gt;
            &lt;div class="loggedInBottom hide"&gt;bottom: When users are logged&lt;/div&gt;
            &lt;div class="anonymousBottom"&gt;bottom: anonymous users&lt;/div&gt; &lt;!--2 needs to below 3 via CSS only--&gt;
            &lt;div class="anonymous"&gt;Content: anonymous users&lt;/div&gt; &lt;!--3 --&gt;
            &lt;div class="loggedIn hide"&gt;content: When users are logged&lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>