Bootstrap 3 change Col-Nesting in MD/LG

Question

Is there a trick to changing the COL grouping?

As you can see in the picture, the first COL 12 should be long in the MD, in the LG only 9. In the LG, the right column should slide up, this way:

Question: How can I realize this different grouping in Bootstrap 3? Or is there a trick without grouping by MD/LG?

Example Code XS-MD: OK. BUT LG: the right column (News) does not slip up.

    <div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>Title Text</h4>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>Main</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center">
      <h4>News</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
   </div>
</div>

Live example at bootply: https://www.bootply.com/uDkg1vTKkZ

Answer 1

Just swap the 2nd and 3rd div and add .pull-right like this

<div class="container">   <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>col-md-12 col-lg-9</h4>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center pull-right">
      <h4>col-sm-6 col-md-3 col-lg-3</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>col-sm-6 col-md-9 col-lg-9</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>    </div> </div>

Check demo

For clearing float, check clearfix