Orientação Landscape com Bootstrap

Considerações

Antes de dar minha resposta, gostaria de trazer as seguintes considerações:

-
Você não especificou qual versão está usando;

-
Portanto, minha resposta será referente a 4.

-
Bootstrap 4 não utiliza landscape como breakpoint.

Breakpoints BS4

Quando falamos da versão mais nova do Bootstrap, **não existe breakpoint em *landscape***. Esse framework utiliza as medias queries para fazer uma abordagem mobile first e, consequentemente, os breakpoints são feitos com a propriedade** *min-width***.

Por isso, se você estiver testando o projeto virando o celular, na verdade, o frame está levando em conta apenas a largura do seu dispositivo. Assim, ele pouco se importa se o aparelho está deitado ou não.

Alterando os breakpoints

Para alterar os breakpoints do BS4 temos dois caminhos:

-
Sass;

-
Exige mínimo conhecimento da sintaxe scss.

-
CSS.

-
Existe básico de CSS.

Caminho Sass

Este caminho é dado como rápido, pois, basta alterar os valores de duas variáveis no partial _variables.scss. E, no seu caso, primeiramente, deve-se diminuir o valor do item sm, na variável $grid-breakpoints:

/monthly_2018_02/var-sass.png.9a7021186a4b93f4f5bf6ba3e6c81133.png" />

(O valor para esse item deve ser igual a largura do seu celular, em posição horizontal)

Em segundo plano, diminuir proporcionalmente, o valor do item sm da variável $container-max-widths:

/monthly_2018_02/var-width-sass.png.ea0b84c4e414c813c06008b3199d47ac.png" />

Caminho CSS

Diferente do método passado, este exige que você procure e substitua breakpoints, no arquivo CSS. E, caso esqueça algum, seu layout vai quebrar.

Os primeiros valores a serem alterados são os seguintes:

/monthly_2018_02/media-css.png.c8e3b79f5eb0d591a54077e07fb950e5.png" />

(O valor da primeira propriedade deve ser igual a largura do seu celular, em horizontal)

Agora, importante é alterar o valor de breakpoint da media query que comporta as colunas para dispositivos pequenos (col-sm):

/monthly_2018_02/var-col-width-sass.png.79b1ae83c65b94dae87099467e4b5352.png" />

(O valor para esse item deve ser igual a largura do seu celular, em posição horizontal)

Você pode querer alterar os breakpoints desses dois utilitários, também:

/monthly_2018_02/d-none.png.2c8f34c9dd3d910638a81b4bcdcddaa8.png" style="width:350px;height:auto;" alt="d-none.png.2c8f34c9dd3d910638a81b4bcdcddaa8.png" />/monthly_2018_02/flex.png.48904d67650f26b80cb71755557db67a.png" style="width:350px;height:auto;" alt="flex.png.48904d67650f26b80cb71755557db67a.png" />

@Joao_Lucaas

Parabéns!

Seu post foi bem explicado, claro, profundo e didático. Uma verdadeira aula para alterar breakpoints nativos do BS.

Mas, nesse caso específico, poderíamos usar a solução de criar um breakpoint usando media query?

@media only screen and (orientation: landscape) {
// declarações CSS
}

@Maujor

Pra ajudar o Mateus, de tal maneira, ainda não tenho conhecimento suficiente. No entanto, vagamente, imagino que o caminho pode ser importando os mixins de grid.

Além do mais, tem como tu ensinar pra gente, aí?

@Joao_Lucaas

Muito obrigado. Resposta muito boa.