How to reorder divs / alter markup at breakpoints

Question

I have two divs displayed inline-block beside each other, each with 45% width. At a certain break-point their widths are both changed to 100%, causing them to stack. This is obviously super simple. My question is this: how can I alter the markup at said break-point to cause what would be the bottom div to appear on top?

My existing markup relies heavily on inline-block level display, and I'd prefer to not switch things over to flexbox site-wide at this time. Thus, I am after a solution which uses inline-block.

Consider this simple example:

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
}
.right {
  background-color:aquamarine ;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}

<div class="left">
  <p>LEFT</p>
</div>

<div class="right">
  <p>RIGHT</p>
</div>

Everything works great here, but my desired result is that the RIGHT div appears on top of the LEFT div after the break-point. I can obviously achieve this using flexbox to reorder the divs, but that would require hours and hours of work to switch everything over to support this display property. I need an inline-block solution. Thoughts appreciated.

Answer 1

You can use display: flex; css property. The basic approach would be to set the parent element (e.g., container) to display: flex; this generates the flexbox and allows you to set different parameters for the children like

  .right{
    order: 1;
  }
  .left{
    order: 2
  }

Depending on what browsers you need to support your website, you could use the flex-box. check the flex box support here

.left,
.right {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 100px 0;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    flex-direction: column
  }
  .right {
    order: 1;
  }
  .left {
    order: 2
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

Update

You can use rotate() transform functions to get your desired result. Working demo below:

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .container>div {
    display: block;
    margin: 0 auto 5px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

Update 2 Using jQuery

$(window).resize(function() {
  if ($(window).width() <= 550) {
    $('.left').remove().insertAfter($('.right'));
  } else {
    $('.left').remove().insertBefore($('.right'));
  }
})

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>