Q:

move box from right to top when screen shrinks

I have two blocks of text I want to display on the screen. When the screen is wide, I want to display them like this:
+---------+  +---------+
| Block B |  | Block A |
+---------+  +---------+

When the screen is narrow, I want to display them like this:
+---------+
| Block A |
+---------+

+---------+
| Block B |
+---------+

Note that it is the block on the right that moves to the top when the screen shrinks.
Is there a way to do this with CSS?
I came up with this:

.frame {
  border: 2px solid black;
  padding: 1px;
}

#boxA {
  float: right;
  border: 1px solid black;
  text-align: right;
  min-width: 150px;
}

#boxB {
  border: 1px solid black;
}

@media (max-width: 500px) {
  #boxA {
    float: none;
    width: 100%;
    text-align: center;
    height: auto;
  }
  #boxB {
    width: 100%;
  }
}
<div class="frame">
  <div id="boxA">
    Some text<br/> Other text<br/> More text
  </div>

  <div id="boxB">
    Now is the time for all good men to come to the aid of their party. The quick brown fox jumps over the lazy dog. Every good boy does fine. A fool and his money are soon parted. Many visitors enter my jail. Some use no pass. Cry havoc, and let loose the
    dogs of war.
  </div>
</div>

Which almost works, except because I use the float: right, if the text on the left is long enough, it wraps underneath the text on the right, which we don't want. We want two distinct columns.
I tried putting height: 100% on #boxA but that didn't work.
Note that the width of block A is variable depending on the data, and I want block B to fill the remaining space.

A:

One solution is to use flexbox:
HTML:
<div class="wrapper">
  <div class="block a">Block A</div>
  <div class="block b">Block B</div>
</div>

CSS:
.wrapper {
  display: flex;
  align-items: flex-start;
}

.block.a {
  order: 1;
}

@media (max-width: 500px) {
  .wrapper {
    flex-direction: column;
  }
  .block.a {
    order: 0;
  }
}

Demo: http://jsfiddle.net/1qskxn9y

Note that the width of block A is variable depending on the data, and I want block B to fill the remaining space.

To satisfy this condition when the viewport is greater than 500px you can modify the above example with these changes:
.wrapper {
    display: flex;
    // remove this: align-items: flex-start;
}
// add this:
.block.b {
    flex: 1;
}

When less than 500px each block will fill the viewport width.
Demo: http://jsfiddle.net/1qskxn9y/1/

