There is such a fairly simple structure:

.container { max-width: 300px; color: #fff; } .sidebar, .content { min-height: 150px; } .sidebar { width: 100px; float: left; background: #f00; } .content{ overflow: hidden; background: #00f; } .third-block { clear: both; min-height: 100px; background: #0f0; } 
 <div class="container"> <div class="sidebar">Блок 1</div> <div class="content">Блок 2</div> <div class="third-block">Блок 3</div> </div>

https://jsfiddle.net/j7n9yf5q/2/ It is necessary when changing the window to 768px to change blocks of places - Block 2 becomes the first place, Block 3 - behind it, and Block 1 goes down to the bottom. How to implement it on jQuery?

  • on flex-box this is implemented very easily, you just need to specify the order for this and that’s it, read about the flex-box - user33274
  • I know that this is done easily)) But you need to implement on JS)) - Alex
  • on js? What are such dances with a tambourine for? - user33274
  • IE9 does not support flexbox - Alex
  • I do not argue about ie, but arachne does not support css at all, what now for all poop to do design? - user33274

2 answers 2

 var min_width = 768; $(window).on('resize', function() { var new_width = $(window).width(); var container = $('.container'); if (new_width <= min_width && !container.hasClass('compact')) { container.addClass('compact'); $('.sidebar').insertAfter($('.third-block')); } if (new_width > min_width && container.hasClass('compact')) { container.removeClass('compact'); $('.sidebar').insertBefore($('.content')); } }).trigger('resize'); 
 .container { min-width: 320px; max-width: 1200px; color: #fff; margin: 0 auto; } .sidebar, .content { min-height: 150px; } .sidebar { width: 100px; float: left; background: #f00; } .content { overflow: hidden; background: #00f; } .third-block { clear: both; min-height: 100px; background: #0f0; } .compact .sidebar { float: none; width: auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="sidebar">Блок 1</div> <div class="content">Блок 2</div> <div class="third-block">Блок 3</div> </div>

  • And what if I have two blocks - sidebar and content? - Alex
  • Replace $('.sidebar').insertAfter($('.third-block')); on $('.sidebar').insertAfter($('.content')); - Darevill
  • Thanks, already basically understood, having made so: $ ('. Sidebar'). InsertAfter ($ ('. Container> div: last-child')); - Alex

Why do it on js? You can use media queries in css for different extensions.

 @media (max-width: 768px) {/*тут нужные стили*/}
  • I need to change the DOM structure - how do I do it in CSS? Flexboxes don't fit me - Alex