I have a nested flexbox layout (using bootstrap v4) which changes orientation according to landscape / portrait mode. A first level div (which is placed by flexbox using the order property), #no, holds 5 icons which serve as buttons. The order property doesn't work as I expect on these icons.
If I don't use an order property, the icons are laid out in the natural order; however, if I try to use the order property to lay them out, it doesn't work. In the code, the info-div (order:3) should be the last element. It isn't. I can get the order I want by changing order in the source; however, I would like to clarify my misunderstanding.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait of New York</title>
<style>
html, body {
width:100%;
height:100%;
}
#container {
height: 100%; width:100%;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: center; -webkit-justify-content: center;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
}
#no {
padding: 1rem;
display: flex; display: -webkit-flex;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: space-between; -webkit-justify-content: space-between;
align-items: center; -webkit-align-items: center;
align-content: space-between; -webkit-align-content: space-between;
flex: 1 1 auto; -webkit-flex: 1 1 auto;
}
.icon {
margin: auto;
flex-grow:1;
flex-basis: auto;
}
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
// stuff living in #no
#info-div1 {
order: 3; -webkit-order: 3;
}
#minus {
order: 0; -webkit-order: 0;
}
#hb2 {
order: -1; -webkit-order: -1;
}
#plus {
order: 1; -webkit-order: 1;
}
#comment-button-div {
order: 2; -webkit-order: 2;
}
@media screen and (orientation: landscape ){
#container {
flex-direction: row; -webkit-flex-direction: row;
}
#no {
flex-direction: column; -webkit-flex-direction: column;
height: 100%;
max-width: 10rem;
order: 0; -webkit-order: 0;
}
}
@media screen and (orientation: portrait ){
#container {
flex-direction: column; -webkit-flex-direction: column;
}
#no {
flex-direction: row; -webkit-flex-direction: row;
max-height:10rem;
width:100%;
order: 2; -webkit-order: 2;
}
}
</style>
<script src="https://www.google.com/recaptcha/api.js"
async defer>
</script>
</head>
<body>
<div id="container">
<div id='no'>
<div id='minus' class="icon" title="Not special.">
<a href="#" id="nHeart" >
<img class="img icon" src="http://gps-photo.org/images/Not.svg"/>
</a>
</div>
<div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
<div class="dropdown">
<img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
<div class="dropdown-menu">
<a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a>
<a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a>
<a class="dropdown-item cmore" data-toggle="modal" href="#myModal">
</a>
<a class="dropdown-item cpony" data-toggle="modal" href="#myModal">
</a>
<a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
</div>
</div>
</div><!-- end hb2 -->
<div id='plus' class="icon" title="Loving it!">
<a href="#" id="heart1" >
<img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/>
</a>
</div>
<div id='comment-button-div' class="icon" title="Click for comments">
<a class="comment-page" data-toggle="modal" >
<img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/>
</a>
</div>
<div id='info-div1' class="icon" title='Information' >
<a class="info-page" data-toggle="modal" >
<img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/>
</a>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</body>
</html>
