Estou tentando alterar a ordem e a extensão de três colunas usando o Bootstrap, dependendo do dispositivo.

Eu estou indo para isso:

Mas eu continuo terminando com divs ausentes e espaço vazio onde meu incrível deve estar. Aqui está minha melhor tentativa, mas algo está obviamente errado:

<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>