How to display one element in different blocks depending on the width of the page? Example: Example

I do not want to make 2 identical blocks and hide, because Often the binding is on id + javascript Some blocks, such as a filter, are heavy, I don't want to generate them several times. What are some solutions to such problems?

  • And what bootstrap is not an option? doesn't it roll? getbootstrap.com/css - Torba
  • one
    In this case, the flex box is great, and to say that it is currently not cross-browser - an error is user33274

2 answers 2

Red block jumps over row

Red block jumps over row

1. flex

Change the order of the blocks and their width.

https://jsfiddle.net/glebkema/96rmo9z4/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { color: white; font-family: Helvetica, sans-serif; font-size: 48px; font-weight: bold; margin: 0; } .container { display: flex; flex-wrap: wrap; } div[class|="block"] { flex: 0 0 100%; padding: 12px 20px; } .block-red, .block-yellow { height: 200px; } .block-blue, .block-green { height: 400px; } .block-blue { background-color: #60c; } .block-green { background-color: #0c6; } .block-red { background-color: #c06; } .block-yellow { background-color: #ee3; } .hidden-xs { display: none; } @media (min-width: 768px) { .block-blue, .block-yellow { flex: 2 2 66.66666667% !important; } .block-red, .block-green { flex: 1 1 33.33333333% !important; } .block-red { order: 1; } .block-green { order: 2; } .block-blue { order: 3; } .hidden-xs { display: block; } .visible-xs { display: none; } } 
 <div class="container"> <div class="block-yellow">Top Menu</div> <div class="block-green">Logo</div> <div class="block-red">Cart</div> <div class="block-blue hidden-xs">Main Menu</div> <div class="block-blue visible-xs">Login</div> </div>

2. float + margin

The difficulty is that when you go to the wide screen, the Cart does not just outrun the Logo , but rises a row before it. Bootstrap, for example, changes the order of columns only within a single row.

But if you choose the height and width of the blocks, you can cheat:

  1. Wrap up the Logo and Top Menu in a shared box. Since the menu is wider than the logo, this block will have a lower right corner.

  2. For Top Menu set a negative margin-left so that it overlaps the top and obscures the empty corner of the added block.

    https://jsfiddle.net/glebkema/hpouarzy/

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { color: white; font-family: Helvetica, sans-serif; font-size: 48px; font-weight: bold; margin: 0; } div[class|="block"] { padding: 12px 20px; } .block-red, .block-yellow { height: 200px; } .block-blue, .block-green { height: 400px; } .block-blue { background-color: #60c; } .block-green { background-color: #0c6; } .block-red { background-color: #c06; } .block-yellow { background-color: #ee3; } .hidden-xs { display: none; } @media (min-width: 768px) { .nest, .block-red, .block-blue { float: left; } .nest { width: 66.66666667%; } .block-blue { width: 66.66666667%; margin-left: -33.33333333%; } .block-red { width: 33.33333333%; } .block-green { width: 50%; } .hidden-xs { display: block; } .visible-xs { display: none; } } 
 <div class="nest"> <div class="block-yellow">Top Menu</div> <div class="block-green">Logo</div> </div> <div class="block-red">Cart</div> <div class="block-blue hidden-xs">Main Menu</div> <div class="block-blue visible-xs">Login</div>

3. the same option for bootstrap

https://jsfiddle.net/glebkema/27ax3csa/

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); body { color: white; font-family: Helvetica, sans-serif; font-size: 48px; font-weight: bold; } .block-red, .block-yellow { height: 200px; } .block-blue, .block-green { height: 400px; } .block-blue { background-color: #60c; } .block-green { background-color: #0c6; } .block-red { background-color: #c06; } .block-yellow { background-color: #ee3; } @media (min-width: 768px) { .block-blue { margin-left: -33.33333333%; width: 66.66666667% !important; } } 
 <div class="container-fluid"> <div class="row"> <div class="col-sm-8"> <div class="row"> <div class="col-sm-12 block-yellow">Top Menu</div> <div class="col-sm-6 block-green">Logo</div> </div> </div> <div class="col-sm-4 block-red">Cart</div> <div class="col-sm-4 block-blue hidden-xs">Main Menu</div> <div class="col-xs-12 block-blue visible-xs-block">Login</div> </div> </div>

    make two classes with styles for large and small screens, and on js check the width and assign the required class to the div

    • On js check the width!?!?!? But what about media queries? !! - NeedHate