<div class="row"> <div class="col-12 col-md-12 col-lg-6"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus. <br> <br> <br> Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus. </p> </div> <div class=" col-lg-6"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus. <br> <br> <br> Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus. </p> </div> </div>

When bootstrap 4 is connected, the text is divided into 2 columns. How to make, that at compression, for example, to col-md the second column disappeared and only the first remained.

  • Add the second column to the class hidden-md-down - Pyramidhead

2 answers 2

Use .d-{breakpoint}-{value} .

If you want to hide on xl, sm, md , use .d-none .d-lg-block , which means that the block is hidden at xl, sm, md resolution, but is shown in lg

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="row"> <div class="col-12 col-lg-6"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula ipsum non leo tristique eget facilisis lacus commodo. Curabitur vitae justo lorem, non ornare nibh. Pellentesque pretium, tellus ac ultrices faucibus, nibh mauris dapibus lorem, vitae viverra nisl elit sit amet libero. Nam eu blandit risus. </p> </div> <!-- Hide on xs, sm, md, but Shown on lg and xl --> <div class="col-lg-6 d-none d-lg-block bg-light"> <p> Phasellus imperdiet mattis nulla. Integer gravida imperdiet congue. Proin vitae pretium augue. Donec est sem, mattis et blandit ac, blandit at arcu. Donec tempus tincidunt suscipit. Suspendisse eu vulputate lacus. </p> </div> </div>

A plate of visibility.

 Screen Size | Class -------------------+------------------------------- Hidden on all | .d-none Hidden only on xs | .d-none .d-sm-block Hidden only on sm | .d-sm-none .d-md-block Hidden only on md | .d-md-none .d-lg-block Hidden only on lg | .d-lg-none .d-xl-block Hidden only on xl | .d-xl-none Visible on all | .d-block Visible only on xs | .d-block .d-sm-none Visible only on sm | .d-none .d-sm-block .d-md-none Visible only on md | .d-none .d-md-block .d-lg-none Visible only on lg | .d-none .d-lg-block .d-xl-none Visible only on xl | .d-none .d-xl-block
    1. Point to the block that needs to hide the classes .d-md-none .d-lg-block which means that at resolutions from 768 to 991, the block will be hidden, starting from 992 - will be visible.
    2. Or use media queries to control the @media (min-width: 768px) and (max-width: 991px) blocks @media (min-width: 768px) and (max-width: 991px)