Question: I have the following html:

```
<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>

```

css:

```
.left {
    width: 70%;
    float: left;
    background-color: red;
}
.right {
    width: 30%;
    float: left;
    background-color: yellow;
}

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

```

I am hoping to make the right column stay on top when the display is one column. 

Here is the jsfiddle link: <https://jsfiddle.net/m7zpoc30/1/>

What should I do, including changes to my current CSS?

Answer: 
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/>
Here's an alternative solution using order flex property. 
See snippet below.

```css
.container {
  display: flex;

}

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

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

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

```html
<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>
```