Aligning bootstrap grids : My grid setup now is as follows

    <div class='col-md-12 col-sm-12 col-xs-12'>
        <div class='col-md-9 col-sm-9 col-xs-12'>
             DIV 1
        </div>

        <div class='col-md-3 col-sm-3 col-xs-12'>
             DIV 2
        </div>

        <div class='col-md-9 col-sm-9 col-xs-12'>
             DIV 3
        </div>

    </div>

My current output is
[![enter image description here][1]][1]


I want to get rid of the white space between div 1 and div 3. I don't want to merge div 1 and div3 because in mobile mode div 2 goes below div 3.

My expected outcome is
[![enter image description here][2]][2]


  [1]: https://i.stack.imgur.com/4Zzq1.png
  [2]: https://i.stack.imgur.com/NNyoI.png

How can I achieve this in bootstrap?