div.left, div.right stacked on small device

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="container">
  <div class="header-wrapper">

    <div class="left"> This is some longer text that may not fit in-line with buttons</div>
    <div class="right">
      <a type="button" class="btn btn-default">Table</a>
      <a type="button" class="btn btn-default">Charts</a>
    </div>
  </div>

  <p>When the buttons fit in-line with the .left text not-wrapped, they should be displayed in-line and right-aligned inside .header-wrapper</p>

  <p>Otherwise the buttons should be displayed below the div.left </p>
  <div class="header-wrapper">
    <div class="in-line">
      This would be an inline example
    </div>
    <div class="in-line" id="right">
      Divs will stack withoud media queries
    </div>
  </div>
</div>

CSS

.header-wrapper {
  border: 1px solid green;
}

.container {
  border: 1px solid black;
}

.in-line {
  display: inline;
  border: 1px solid red;
}

#right {
  float: right;
}