Rearrange Sibling DIVS

Question

So I have this HTML code with the following CSS.

HTML

<div class="secondpostholder">
    <div class="rightsecond">
        <h1>
            <a href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>">
                <?php the_title();?>
            </a>
        </h1>
        <div class="firstmetaholder">
            <p class="secondentrymeta">
            by
                <span class="secondauthormeta">
                    <?php the_author();?>
                </span>
                • <?php the_date(); ?>
            </p>
            <p class="secondentryexcerpt">
                <?php
                $content = get_the_content();
                echo wp_trim_words( $content , '30' ); ?>
            </p>
            <div class="secondreadmoreholder">
                <a class="secondreadmorea" href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>">
                    Read More
                </a>
            </div>
        </div>

    </div>

    <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'TypeOne' ); ?>

    <div class="leftsecond" style="background-image: url('<?php echo $background[0]; ?>');">
        <a  class="leftseconda" href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>">
        </a>
    </div>
</div>

CSS

secondentry {
    display:inline-block;
    width:100%;
}
.secondentryholder {
    width:100%;
    max-width:1120px;
    margin:0 auto;
    position:relative;
    height:100%;
}
.secondpostholder {
    margin-bottom:60px;
}
.rightsecond{
    width: 420px;
    right:0;
    position: absolute;
    margin-left:30px;
}
.secondpostholder {
    clear:both;
}
.leftsecond{ 
    background: #222;
    float:left;
    width:calc(100% - 450px);
    min-height:400px;
    background-repeat:no-repeat;
    display:block;
    position:relative;
    background-position:center center;
}

You may visit the website that I'm working on to have a clear picture of what's going on.

Once you opened the website, resize your browser window to 600px and check out the second post ("We found love in a hopeless place") to the sixth post ("The Undisputed Truth: What Happens If You Don’t Pay Your Credit Card Bills? ") and see what happens.

My problem is, Is there a way where in the "leftsecond" DIV would be on the top of the "rightsecond"?

I know this can easily be done by modifying the HTML structure BUT please be informed that the original CSS Style of the two divs are floating.

What I'm trying to achieve here is related to media queries, when the screen is large, the two divs are floated to each other. There's no problem with the code of this. The problem lies when the screen is small and I want to remove the FLOATS then the "leftsecond div" would be at the TOP and the "rightsecond div" at the BOTTOM.

The two divs don't have the same height. Only the "leftsecond" div has a fixed height. The rightsecond div has a fluid height which changes according to it's content.

Answer 1

Alternate Suggestion:

This does change the HTML structure, but there doesn't seem to be any way to avoid it and this approach seems to match your expectation for both large and small screen sizes.

• When the screen size is large, the two elements are floated next to each other with the div class='leftsecond' on the left and the div class='rightsecond' on the right side.
• When the screen size is small, the float is removed and they get displayed one below the other as they are already block elements.

.rightsecond {
  width: 420px;
  float: right;
  margin-left: 30px;
}
.leftsecond {
  float: left;
  width: calc(100% - 450px);
  min-height: 100px;
  position: relative;
  background: url(http://lorempixel.com/500/100/nature/1);
  background-repeat: no-repeat;
  background-position: center center;
}
.secondpostholder {
  clear: both;
  border-top: 2px solid;
}
@media (max-width: 1000px) {
  .rightsecond,
  .leftsecond {
    width: 500px;
    float: none;
    position: relative;
    margin-left: 0px;
  }
  .secondpostholder {
    width: 500px;
    height: 100%;
    margin-bottom: 10px;
  }
}

<div class="secondpostholder">
  <div class="leftsecond" id="green"></div>
  <div class="rightsecond" id="blue">
    Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/>
  </div>
</div>
<div class="secondpostholder">
  <div class="leftsecond" id="green2"></div>
  <div class="rightsecond" id="blue2">
    Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/>
  </div>
</div>
<div class="secondpostholder">
  <div class="leftsecond" id="green3"></div>
  <div class="rightsecond" id="blue3">
    Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/>
  </div>
</div>

---

Original Answer v2:

Since you have stated that you have multiple such containers and that container size is determined by the height of its contents, you could use a transform: translateY(-100%) on the second div which will move it up and a reverse transform (transform: translateY(100%)) on the first div which will move it down.

This would have worked with my initial assumption that the elements were of same size. A tweaked version of this approach would have worked if the elements atleast had fixed size if not the same. But since one element has fluid size, this approach will not work.

.secondpostholder {
  width: 100%;
  height: 100%;
  position: relative;
}
.rightsecond {
  background: blue;
  width: 100px;
  height: 200px;
  transform: translateY(100%);
}
.leftsecond {
  background: green;
  width: 100px;
  height: 200px;
  transform: translateY(-100%);
}

<div class="secondpostholder">
  <div class="rightsecond" id="blue"></div>
  <div class="leftsecond" id="green"></div>
</div>
<div class="secondpostholder">
  <div class="rightsecond" id="blue2">2blue</div>
  <div class="leftsecond" id="green2">2green</div>
</div>
<div class="secondpostholder">
  <div class="rightsecond" id="blue3">3blue</div>
  <div class="leftsecond" id="green3">3green</div>
</div>

---

Original Answer v1:

If there was only one such block then we could have used absolute positioning like in the below snippet.

.secondpostholder {
  position: relative;
  width: 100px;
  height: 100% auto;
}
.rightsecond {
  position: absolute;
  top: 200px;
  background: blue;
  width: 100px;
  height: 200px;
}
.leftsecond {
  position: absolute;
  top: 0px;
  background: green;
  width: 100px;
  height: 200px;
}

<div class="secondpostholder">
  <div class="rightsecond" id="blue">
  </div>

  <div class="leftsecond" id="green">
  </div>
</div>

Answer 2

When you resize the browser below 768 px, you can set the child sibling divs to have relative positioning and remove the top values. Change the order using the flexible box technique. This is supported from IE10 and other major browsers. This is not dependent on height of the sibling divs.

.secondpostholder {
  width: 100px;
  height: 100% auto;
  position: relative;
}
.rightsecond {
  background: blue;
  width: 100px;
  height: 200px;
  position: absolute;
  top: 200px;
}
.leftsecond {
  background: green;
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0px;
}
@media (max-width: 768px) {
  .secondpostholder {
    display: flex;
    display: -ms-flex;
    flex-direction: column;
  }
  .rightsecond {
    position: relative;
    order: 2;
    top: 0;
  }
  .leftsecond {
    position: relative;
    order: 1;
  }
}

<div class="secondpostholder">
  <div class="rightsecond" id="blue">
    1blue
  </div>

  <div class="leftsecond" id="green">
    1green
  </div>
</div>

<div class="secondpostholder">
  <div class="rightsecond" id="blue">
    2blue
  </div>

  <div class="leftsecond" id="green">
    2green
  </div>
</div>

<div class="secondpostholder">
  <div class="rightsecond" id="blue">
    3blue
  </div>

  <div class="leftsecond" id="green">
    3green
  </div>
</div>