Responsive page: make the right column stay on top when in one column

Here's a solution using flex, which might be of interest. You can wrap your left and right divs in a container with display:flex, and then use flex-direction on resize. See snippet below. (jsfiddle)

.container {
  display: flex;
  
}

.left {
  width: 70%;
  background-color: red;
}

.right {
  width: 30%;
  background-color: yellow;
}

@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column-reverse;
  }
  .left, .right {
    width: 100%;
  }
  
}
<div class="container">
  <div class="left">
    this is left side. it should go to the bottom when in one column
  </div>
  <div class="right">
    this is right side. it should go to the top when in one column
  </div>
</div>


Change the order of the divs so that right comes first in the html, and update the class="right" div to float:right;

https://jsfiddle.net/m7zpoc30/3/

Tags:

Css

Recent Posts