How can I position one div to the right of two others?

Question

I'm trying to position three elements inside a div and I'm having some trouble.

Two of these elements need to be stacked to the left and one floated to the right.

Placing #three above the other content and floating it to the right allows it to appear in the correct location. However, once my media queries kick in on small screens and those three elements jump to 100% width it appears in the incorrect order.

How can I position #three so it appears at the same height at #one and #two without having to re-order them?

I cannot tuck #two inside #one as it is not relevant to the address tag.

#container {
  width: 100%;
  background-color: red;
  height: 150px;
}

#one, #two {
  width: 40%;
}

#three {
  float: right;
  }

#one {
  background-color: green;
  }
#two {
  background-color: blue;
  }
#three {
  background-color: orange;
  }

<section id="container">
  <address id="one">
    <p>text text text <br> text text <br> text</p>
    </address>
  <div id="two">
    <p>text text text text </p>
    </div>
  <nav id="three">
    <p>text text text <br> text text <br> text</p>
    </nav>
</section>

Answer 1

Can you position #three absolutely? When your media queries kick in, then position it back at relative. http://jsfiddle.net/L0v8ozjq/