The bootstrap has a built-in class for vertical and horizontal arrangement of a group of buttons, you need to make buttons in a mobile view in a vertical arrangement, and horizontal ones in a desktop view. Out of position by creating blocks that hide in a specific extension through the hidden classes:

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hidden-md hidden-lg" style="text-align: right; float:right"> <div class="btn-group-vertical navbar-fixed-right header-menu"> ... </div></div> <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 hidden-sm hidden-xs" style="text-align: right; float:right"> <div class="btn-group navbar-fixed-right header-menu"> ... </div></div>

Is it possible to do the same through media queries in css? That is, to change the class of the element in css at a certain expansion of the screen so as not to produce a bunch of extra code?

    1 answer 1

    You can, just like you did through bootstrap, add a media request to the bottom of your css, and create a class in it that will be hidden when resolving from sm to xs, and apply this class to your div. If necessary, I can write the code. There is only one benefit: one less class in each div.

    • For myself, I did the same task, I did the same task through media queries, but I stopped at the extra 2 divs. There is even more in the project mess files with css (4 different people who don’t really fiddle around with their own site’s own piece of site, so there are some pages on the bootstrap grid, some in the form of tables and all this with dozens of overlapping styles) so I stopped at an extra diva. - Maryen