Reorder column stack in different screen sizes
Tell in Bootstrap or Foundation, Is it possible to achieve this layout?
Do you see the problem here? The top column should be at the bottom when the tablet is sized. The Push / Pull trick does not apply here because it is a different type of column reordering.
Do you have any ideas?
source to share
You can use the property order
in CSS with flex boxes.
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#order
Check browser compatibility here http://caniuse.com/#search=order
source to share
With Foundation, you can use the size-push-units and size-pull units. For example: .small-push-10 or .large-pull-7 to adjust positioning using this number of columns. Keep in mind that you must also set the opposite of the corresponding elements. So, for your example, if each of the boxes is 12 columns wide, then on the green box you will get the class small-push-24 (the total width of all the elements you want to push), and on each of them in the yellow boxes you have will be small-pull-12 (width of the element that is pushing them).
You can read about it in the documentation here under the heading Ordering a Source: http://foundation.zurb.com/docs/components/grid.html
source to share
This is as close as possible: see example # 1 .
When I want to stack multiple columns on top of each other, I just give them a size of 12 (see example # 2) and bootstrap knows how to deal with that, unfortunately it doesn't seem to work in the nested state. Good luck.
source to share
Your comment regarding IE8 support limits you to a few options, I believe:
1.) If your content in these blocks is not dynamic (which means it will have a constant height), you can fake this order using negative margins. http://codepen.io/ryantdecker/pen/oXGBRe
@media screen and (max-width: 600px) {
.greenTop {margin-top:260px;}
.yellow1 {margin-top:-360px;}
}
2.) If the block represented by the green area is not particularly complex, it may be advisable to have it twice on the page and show / hide each as needed based on media queries. http://codepen.io/ryantdecker/pen/BNwpEq
.greenTop {display:none;}
@media screen and (min-width: 600px) {
.greenTop {display:block;}
.greenBottom {display:none;}
}
(Both require something like response.js to get IE8 to play with media queries: http://getbootstrap.com/getting-started/#support-ie8-ie9 )
source to share
Ronnel Castillo Ocampo . Hi take a look at this Fiddle I am using Bootstrap and some media query breakpoints to do this with some shows and hide etc.
No push / pull and no negative margin values. Just a simple straightforward path.
Take a look and see if this path works for you when you resize it.
Here is a great Fiddle view .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 5%;
margin-bottom: 5%;
}
.block-gray {
margin-top: 2%;
height: 300px;
background-color: darkgray;
}
.block-green-top {
margin-top: 0%;
height: 100px;
background-color: greenyellow;
}
.block-green {
margin-top: 2%;
height: 100px;
background-color: greenyellow;
}
.block-yellow {
margin-top: 2%;
height: 100px;
background-color: yellow;
}
.block-right {
margin-top: 2%;
}
.block {
margin-top: 2%;
height: 400px;
}
.borders {
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #000000;
}
@media(max-width:1200px) {
.block-green-top {
display: none;
}
.block-green {
margin-left: 15px;
}
.block-yellow {
margin-left: 15px;
}
}
@media(max-width:320px) {
.block-green {
margin-left: 0px;
}
.block-yellow {
margin-left: 0px;
}
.col-xs-320 {
width: 100%;
}
.block {
height: 100px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container">
<div class="container col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-1 borders block-gray"></div>
<div class="container col-xs-320 col-xs-8 col-sm-8 col-md-8 hidden-lg text-center block">
Your content that would fill this area
</div>
<div class="col-xs-320 col-xs-4 col-sm-4 col-md-4 col-lg-2 block">
<div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-green-top"></div>
<div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-yellow"></div>
<div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-yellow"></div>
<div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 hidden-lg borders block-green"> </div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
source to share
You can make it work in Foundation with nesting and col ordering classes. However, this requires hidden columns and that the hidden columns must be the same height than the two yellow boxes ...
<div class="row">
<div class="large-8 medium-12 columns gr">
-
</div>
<div class="large-4 large-reset-order medium-6 medium-push-6 small-6 small-push-6 columns">
<div class="row">
<div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
</div>
<div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
</div>
<div class="large-12 medium-12 medium-push-12 small-12 small-push-12 columns gre">
green
</div>
</div>
</div>
<div class="large-4 medium-6 medium-pull-12 small-6 columns">
<div class="row">
<div class="large-12 medium-12 small-12 columns ye">
1
</div>
<div class="large-12 medium-12 small-12 columns ye">
2
</div>
</div>
</div>
</div>
source to share