Bootstrap 3 упорядочивающая таблица сетки в ответном макете

Question

Я использую Bootstrap 3 и хотел переупорядочить столбец сетки в мобильном макете.

Desktop это выглядит, как скриншоте:

где открыт мобильный телефон, изображение идет вниз, не представляется возможным разместить картину вверх, повторно заказав столбец сетки когда пользователь просматривает в мобильной версии?

код выхода:

<div class="container"> 
    <div class="row"> 

     <div class="col-sm-8 col-lg-9"> 
      <div>John Smith</div> 
      <div>Application Engineer</div> 
      <div> 
       <dl class="dl-horizontal"> 
        <dt>Reg. Number</dt><dd>M8553</dd> 
        <dt>Mobile Number</dt><dd>012-5229887</dd> 
        <dt>Email</dt><dd>john.smith@email.com</dd> 
       </dl> 
      </div> 

      <div class="row"> 
       <div class="col-xs-12 col-lg-2"><img src="QR-code.png" width="78" /></div> 
       <div class="col-xs-12 col-lg-10"> 
        <div>        
         <span> 
         <button type="button" class="btn btn-primary" data-id="10"><span class="fa fa-fw fa-thumbs-o-up"></span> Like</button> 
         </span>&nbsp;&nbsp; 

         <a class="btn btn-success btn-alink" role="button" href="mailto:feedback@email.com?subject=Feedback"><span class="fa fa-fw fa-envelope-o"></span> Send us your feedback</a> 
        </div> 
        <div><span>0</span> liked, 63 views.</div> 
       </div> 
      </div> 
     </div> 
     <!-- /.col-lg-9 --> 

     <div class="col-sm-4 col-lg-3"> 
      <img src="images/john-smith.jpg" alt="john-smith"> 
     </div> 
     <!-- /.col-lg-3 --> 

    </div> 
    <!-- /.row --> 
</div> 

Answer 1

Взгляните на эту

колонке заказа Легко изменить порядок нашей встроенной сетки колонн с .col- md-push- * и .col-md-pull- *.

heres ссылка http://getbootstrap.com/css/