Due to the informational hierarchy of the page that I am working on. It requires that sections appear in a different order on devices. Can anyone recommend an approach method to achieve this that isn't hacky or jquery based? Using Bootstrap and Flexbox alone if possible. The idea is that it behaves like this (with components/content also). Please see the image for visual reference
}
body {
display: flex;
}
.control {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: black;
width: 100%;
height: 100vh;
color: white;
font-size: 6rem;
}
.one {
display: flex;
background-color: blue;
width: 50%;
height: 50vh;
}
.two {
display: flex;
background-color: red;
width: 50%;
height: 100vh;
}
.three {
display: flex;
background-color: yellow;
width: 50%;
height: 50vh
}
@media only screen and (max-width: 767px) {
.control {
flex-wrap: nowrap!important;
}
.one {
order: 0;
width: 100vw;
height: 33vh;
}
.two {
order: 2;
width: 100vw;
height: 33vh;
}
.three {
order: 1;
width: 100vw;
height: 33vh;
}
}<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
scalable=yes">
</head>
<body>
<div class="control">
<div class="one">1</div>
<div class="three">2</div>
<div class="control">
<div class="two">3</div>
</div>
</div>
</body>