0

Tenho duas divs e quero que uma desapareça quando chegar no 'md' a outra ocupe as 12 colunas. Como posso fazer isso com Bootstrap?

<div class="container">
  <div class="col">
    Essa desaparece quando chegar em md
  </div>
  <div class="col">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>
4
  • Como que você está fazendo para "chegar no md"?? Edite a tua pergunta pois ela não está clara. Commented 4/04/2018 às 17:26
  • Estou usando Bootstrap
    – Gabriel
    Commented 4/04/2018 às 17:32
  • Quem controla isso é o JS, não o Bootstrap. Commented 4/04/2018 às 17:35
  • A que desaparece ao chegar em md deve ocupar quanto antes de desaparecer? Commented 4/04/2018 às 17:37

3 Respostas 3

2

Bootstrap possui uma classe display abreviada como "d-{breakpoint}-{value}" você pode usá-la para delimitar break-points.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="container">
  <div class="col-12 d-md-none">
    Essa desaparece quando chegar em md
  </div>
  <div class="col-12 d-none d-md-block">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>

Neste exemplo basta clicar em executar e depois click em "Página toda" para ver a primeira <div> desaparecer.


Referencia : https://getbootstrap.com/docs/4.0/utilities/display/

0

Se você estiver utilizando Flexbox (bootstrap), atribua um ID para a div que irá desaparecer e atribua a classe col-12 (para resoluções mobile) e col-md-6 (para resoluções maiores que média) para a div que deve ocupar as 12 colunas, e col-6 para a div que deve desaparecer.

<div class="container">
  <div id="identificadorDaDiv" class="col-6">
    Essa desaparece quando chegar em md
  </div>
  <div class="col-12 col-md-6 ">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>

No seu CSS, você pode adicionar um @media query para resoluções medium ou menores (O padrão do bootstrap é 768px)

@media screen and (max-resolution: 767px) {
    #identificadorDaDiv {
        display: hidden
    }
}
0

Como são 2 divs, coloque col-6 em cada dentro de um row.

A classe d-md-none irá esconder a div ao entrar no md, e a classe col-md-12 irá ocupar as 12 colunas ao entrar no md.

Exemplo:

div.container div.col-6:nth-child(1){
   background: yellow;
}
div.container div.col-6:nth-child(2){
   background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
   <div class="row">
     <div class="col-6 d-md-none">
       Essa desaparece quando chegar em md
     </div>
     <div class="col-6 col-md-12">
       Essa ocupa todas as 12 colunas quando chegar em md
     </div>
   </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .