Estou criando um layout responsivo com uma barra de navegação fixa superior. Abaixo, tenho duas colunas, uma para a barra lateral (3) e outra para o conteúdo (9). Que na área de trabalho se parece com isso

barra de navegação
[3] [9]

Quando eu o resizecelular navbaré compactado e oculto, a barra lateral é empilhada na parte superior do conteúdo, assim:

barra de navegação
[3]
[9]

Gostaria do conteúdo principal na parte superior, por isso preciso alterar a ordem no celular para isso:

barra de navegação
[9]
[3]

Encontrei este artigo que aborda os mesmos pontos, mas a resposta aceita foi editada para dizer que a solução não se aplica à versão atual do Bootstrap.

Como posso reordenar essas colunas no celular? Ou então, como posso inserir o grupo de listas da barra lateral na minha barra de navegação em expansão?

Aqui está o meu código:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Você não pode alterar a ordem das colunas em telas menores, mas pode fazer isso em telas grandes.

Então mude a ordem das suas colunas.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Por padrão, isso exibe o conteúdo principal primeiro.

Assim, no conteúdo principal para celular é exibido primeiro.

Usando col-lg-pushe col-lg-pullpodemos reordenar as colunas em telas grandes e exibir a barra lateral à esquerda e o conteúdo principal à direita.

Trabalhando violino aqui .

Atualizado 2018

Para a pergunta original baseada no Bootstrap 3 , a solução foi usar push-pull .

Agora, no Bootstrap 4 , agora é possível alterar a ordem, mesmo quando as colunas estão empilhadas na largura total verticalmente, graças ao flexbox do Bootstrap 4. OFC, o método push pull ainda funcionará, mas agora existem outras maneiras de alterar a ordem das colunas no Bootstrap 4, possibilitando reordenar as colunas de largura total.

Método 1 - Use flex-column-reversepara xstelas:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Método 2 - Use order-firstpara xstelas:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Resposta original 3.x

Para a pergunta original baseada no Bootstrap 3 , a solução era usar push-pull para larguras maiores e as colunas mostrarão sua ordem natural em larguras menores (xs). (AB reverso para BA).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre declarou: " Você não pode alterar a ordem das colunas em telas menores, mas pode fazer isso em telas grandes ". No entanto, isso deve ser esclarecido para indicar: "Você não pode alterar a ordem das colunas" empilhadas "de largura total .." no Bootstrap 3.

As respostas aqui funcionam para apenas 2 células, mas, assim que essas colunas tiverem mais, elas podem levar a um pouco mais de complexidade. Acho que encontrei uma solução generalizada para qualquer número de células em várias colunas.

Metas

Obtenha uma sequência vertical de tags no celular para organizar-se na ordem que o design exigir no tablet / computador. Neste exemplo concreto, uma tag deve inserir o fluxo mais cedo do que normalmente e outra depois do que normalmente.

Móvel

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

Tablet +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Portanto, as manchetes precisam ser reproduzidas diretamente no tablet + e, tecnicamente, o mesmo acontece com a desc - ela fica acima da tag de legenda que a precede no celular. Você verá em um momento que 4 legendas também estão com problemas.

Vamos supor que todas as células possam variar de altura e precisam ser niveladas de cima para baixo com a próxima célula (descartando truques fracos como uma tabela).

Como em todos os problemas do Bootstrap Grid, a etapa 1 é perceber que o HTML precisa estar em ordem móvel, 1 2 3 4 5, na página. Em seguida, determine como fazer com que o tablet / desktop se reorganize dessa maneira - idealmente sem Javascript.

A solução para obter 1 headlinee 3 qtysentar-se à direita e não à esquerda é simplesmente definir os dois pull-right. Isso aplica CSS float: right, o que significa que eles encontram o primeiro espaço aberto que cabem à direita. Você pode pensar no processador CSS do navegador funcionando na seguinte ordem: 1 se encaixa no canto superior direito. 2 é o próximo e é regular ( float: left), então ele vai para o canto superior esquerdo. Então 3, que é float: rightassim que pula por baixo de 1.

Mas essa solução não foi suficiente 4 caption; porque as 2 células da direita são tão curtas 2 imageà esquerda, tendem a ser mais longas do que as duas juntas. Bootstrap Grid é um hack flutuador glorificado, significado 4 caption é float: left. Com a 2 imageocupação de tanto espaço à esquerda, 4 captiontentativas de caber no próximo espaço disponível - geralmente a coluna da direita, não a esquerda onde queríamos.

A solução aqui (e de maneira mais geral para qualquer problema como esse) foi adicionar uma tag de hack, oculta no celular, que existe no tablet + para empurrar a legenda, que é coberta por uma margem negativa - assim:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Portanto, a solução generalizada aqui é adicionar tags de hackers que podem desaparecer no celular. No tablet +, as tags de hack permitem que as tags exibidas apareçam mais cedo ou mais tarde no fluxo e, em seguida, são puxadas para cima ou para baixo para encobrir essas tags de hack.

Nota: Eu usei alturas fixas para o exemplo simples no jsfiddle vinculado, mas o conteúdo real do site em que eu estava trabalhando varia em altura nas 5 tags. É renderizado corretamente com uma variação relativamente grande na altura das tags, especialmente imagem e descrição.

Nota 2: Dependendo do seu layout, você pode ter uma ordem de colunas consistente o suficiente no tablet + (ou resoluções maiores), para evitar o uso de tags de hackers, usando margin-bottomassim:

Nota 3: Isso usa o Bootstrap 3. O Bootstrap 4 usa um conjunto de grade diferente e não funciona com esses exemplos.

http://jsfiddle.net/b9chris/52VtD/16632/

Outubro 2017

Eu gostaria de adicionar outra solução Bootstrap 4. Um que funcionou para mim.

A propriedade CSS "Order", combinada com uma consulta de mídia, pode ser usada para reordenar colunas quando elas são empilhadas em telas menores.

Algo assim:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Link CodePen: https://codepen.io/preston206/pen/EwrXqm

Ajuste o tamanho da tela e você verá as colunas serem empilhadas em uma ordem diferente.

Vou amarrar isso com a pergunta do pôster original. Com CSS, a barra de navegação, a barra lateral e o conteúdo podem ser direcionados e, em seguida, ordenar as propriedades aplicadas em uma consulta de mídia.

No Bootstrap 4 , se você quiser fazer algo assim:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

É necessário reverter a ordem de B , em seguida, C , em seguida, aplicar order-{breakpoint}-firsta B . E aplique duas configurações diferentes, uma que fará com que compartilhem as mesmas colunas e outra que fará com que elas tenham toda a largura das 12 colunas:

• Telas menores: 12 cols para B e 12 cols para C

• Telas maiores: 12 cols entre a soma deles ( B + C = 12)

Como isso

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Demonstração: https://codepen.io/anon/pen/wXLGKa

Isso é bastante fácil com o jQuery usando insertAfter () ou insertBefore ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

Que simples

se você deseja definir a condição para dispositivos móveis, pode fazê-lo assim

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

exemplo https://jsfiddle.net/w9n27k23/

Começando pela versão móvel primeiro, você pode conseguir o que deseja, na maioria das vezes.

Exemplos aqui:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>