Change order of divs with push/pull column in Boot

问题:

I'm trying to change the order and span of three columns using Bootstrap, depending on the device.

I'm going for this:

But I keep ending up with missing divs, and empty space where my awesome should be. Here is my best attempt, but something is obviously wrong:

<div class="row">

   <div class="col-xs-12 col-sm-4" style="background:blue; color:white;">
      Logo
   </div>

   <div class="col-xs-12 col-sm-push-8" style="background:red; color:white">
      Photo
   </div>

   <div class="col-xs-12 col-sm-pull-12" style="background:green; color:white">
      Nav
   </div>

</div>

回答1:

If you want to achieve this the only way i know in this moment is without push/pull method.

Here is my code:

<div class="col-sm-4" style="background:blue; color:white;">Logo</div>

<div class="col-sm-12 visible-xs" style="background:red; color:white;">Photo</div> 

<div class="col-sm-8" style="background:green; color:white;">Nav</div>

<div class="hidden-xs" style="background:red; color:white;">Photo</div>