I have two divs and I want one to disappear when I get to 'md' and another to occupy the 12 columns. How can I do this with 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>
Bootstrap has an abbreviated% class of% as "d- {breakpoint} - {value}" you can use it to delimit breakpoints.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="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><divclass="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> In this example you just have to click run and then click "All Page" to see the first display disappear.
Reference: link
If you are using Flexbox (bootstrap), assign an ID to the div that will disappear and assign the col-12 class (for mobile resolutions) and col-md-6 (for resolutions greater than average) to the div should occupy the 12 columns, and col-6 for the div that should disappear.
<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>
In your CSS, you can add an @media query for medium or smaller resolutions (Bootstrap default is 768px)
@media screen and (max-resolution: 767px) {
#identificadorDaDiv {
display: hidden
}
}
Since they are 2 divs , put col-6 in each of a row .
The d-md-none class will hide div by entering md , and the col-md-12 class will occupy all 12 columns by entering md .
Example:
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><scriptsrc="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>