There are two slides for the slider, each slide contains 4 blocks with information. On the desktop, it shows 4 blocks, on tablet 2, and on the mobile, everything goes to the column, and not “hides”. I can not understand which class should be set so that certain columns are hidden on the mobile. d-none d-xs-none d-sho-only-not-tried-none doesn't work

The computer should have all 4 blocks, 2 out of 4 on the tablet and the other 2/4 on the other slide, 1/4 on the phone for 3 hours I can’t think of anything, I’m just sorting out the classes, please help me than you can

I use BS4

Desktop The tablet Phone

<div class="carousel-item justify-content-center"> <div class="row"> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> </div> </div> <div class="carousel-item justify-content-center"> <div class="row"> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> <div class="features-item d-flex justify-content-center col-lg-3 col-md-6 col-sm-12"> </div> </div> </div>

This is the way I decided -

 <div class="features-item justify-content-center col-lg-3 d-lg-flex col-md-6 d-md-flex col-sm-12 d-flex">

Created 4 slides, and added such classes to each slide, show - col-sm-12 d-flex for mobile device / hide - col-sm-12 d-none

  • docks have examples of .d-none .d-sm-block (the first table on the page) - teran
  • @teran I tried to write it, in that case everything goes, it seems to me because of d-flex, d-sm-block is for> 568px; (attached screen) imgur.com/QjlZZWk - ANYWAYCODE

0