Bootstrap 3 left column down push content down, not up. How to bypass the bootstrap rule?

Question

MODX

Hello. Help the unknowing:
with this structure:

<div class="container">
      <div class="left_bar col-md-3">
        
      </div>
      <div class="content col-md-9">
      
      <div class="page-header">
        <h1>Вопрос</h1>
      </div>
      
      </div>
    </div>

left-bar naturally becomes higher than the content. at the same time, its content, in addition to the menu, should contain the latest 3 news, and as a result, in mobile devices, the content will go completely down and the user will not scroll to the content ...
tell me how to leave the menu on the left and at the same time, when the screen is resized, it falls below the content.
Help, help professionals!

Answer 1

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3" style="background: #666; padding: 10px;">CONTENT</div>
        <div class="col-md-3 col-md-pull-9" style="background: #999; padding: 10px;">LEFT BAR</div>
    </div>
</div>