There is approximately such a site structure, the behavior of the blocks roughly corresponds to the desired result, except for the last.

At a certain point, the 3 block goes down and occupies 100% width. The internal blocks are arranged in a row with the same width, but when the screen is reduced, the content in the blue blocks does not fit, so I add to this block (3) the class of the carousel (owlcarousel). Here a problem arises, if you change the orientation of the device to the horizontal 3 red blocks become abreast, but the blue blocks lose their appearance due to the fact that owlCarousel hangs its styles and blocks from above. How to achieve the desired result for different orientations of the device while maintaining the structure and the desired look of the page?

PS The option not to use the slider is in case of emergency, since the display of blue blocks 3/1, 2/2 is not very suitable.

The structure and behavior of (Adaptive) blocks are similar to the desired result, bootstrap, height and border for better display.

.block { border: 1px solid red; height: 200px; padding-top: 15px; } .block__inner { border: 1px solid blue; height: 50px; margin-bottom: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="block col-sm-6 col-md-4"></div> <div class="block col-sm-6 col-md-4"></div> <div class="block col-sm-12 col-md-4"> <div class="block__inner col-sm-3 col-md-6"></div> <div class="block__inner col-sm-3 col-md-6"></div> <div class="block__inner col-sm-3 col-md-6"></div> <div class="block__inner col-sm-3 col-md-6"></div> </div> </div> </div>

    2 answers 2

    When changing the screen orientation, adding or deleting css styles is a normal practice. The addClass function on jquery will add the desired style when changing the screen.

      $( window ).resize(function() { if(window.innerHeight > window.innerWidth){ // здесь код для портретной ориентации $(".block__inner").addClass("new_view"); // также можно через css // $(".block").css(""); } });

    Another option for landscape and portrait

     $(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(){ if(window.orientation == 0) { $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"}); } else { $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"}); } }); });

    Perhaps the jquery screen orientation change event will be useful.

     <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> $(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(event){ alert("Orientation changed to: " + event.orientation); }); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The orientationchange Event</h1> </div> <div data-role="main" class="ui-content"> <p>Try to rotate your device!</p> <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>

    for css there is a syntax for screen orientation (it may be useful):

     @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* For landscape, we want the tool bar stick on the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; }
    • You do not quite understand me, here the height is registered for clarity. The problem is that the slider hangs its blocks and styles that prevent my adat rules from being displayed normally. - E_K
    • as an option to rewrite styles, those that interfere with their own Or in extreme cases, remove them from bootstrap.css . - fonjeekay
    • Not really, because under this block is a slider that uses the same styles. - E_K
    • v4-alpha.getbootstrap.com/layout/responsive-utilities can create two blocks, disable it in one, rewrite styles, and leave it in the other as is. To use .hidden-sm and in another hidden-md hidden-lg will be two divas for different screens - fonjeekay
    • I take a note, but I would not like to load the page with an extra code. I will specify, took for an example. But this is not so important. - E_K

    Do not use bootstrap on carousel diva members. And for more fine-tuning the display, use the options of the object owl-carousel, of which there is darkness. https://owlcarousel2.imtqy.com/OwlCarousel2/docs/api-options.html