Поплавок оставил DIV в нижней части правой

Question

Это мой текущий HTML:

.left { width:50%; float:left; } 
 
.right { width:50%; float:left; }

<div class="container"> 
 
     <div class="left">This is left content</div> 
 
     <div class="right">This is left content</div> 
 
    </div>

с этим CSS, для меньшего разрешения right ДИВ идет под left DIV, но я хочу, напротив, я хочу left div подойти под right.

Возможно ли это?

Спасибо!

UPDATE:

Извините, если мой вопрос не был достаточно ясен, Im использованием медиа запросов для гибкой компоновки. Я уже применял медиа-запросы для разных разрешений экрана. Я хотел бы сохранить последовательность для рабочего стола, то есть LEFT div, а затем RIGHT div. Но для мобильных устройств LEFT DIV должен отображаться под RIGHT div. Код примера @GCyrillus - именно то, что я хотел. Вот решение, если у кого-то еще такая же проблема.

http://codepen.io/anon/pen/VYGKjp

Answer 1

Вы можете сделать две вещи здесь, либо всплывают их право, а не влево или изменить разметку следующим образом:

<div class="container"> 
    <div class="right">This is left content</div> 
    <div class="left">This is left content</div> 
</div> 

Answer 2

Просто включите заказ с правым и левым дивы.

HTML

<div class="container"> 
    <div class="right">This is right content</div> 
    <div class="left">This is left content</div> 
</div> 

CSS

.left { width:50%; float:left; } 
.right { width:50%; float:left; } 

Answer 3

Переключите дивы вокруг

<div class="container"> 
    <div class="right">This is right content</div> 
    <div class="left">This is left content</div> 
</div>