#html #css #layout #flexbox
Вопрос:
Из-за информационной иерархии страницы, над которой я работаю. Это требует, чтобы разделы отображались на устройствах в другом порядке. Может ли кто-нибудь порекомендовать метод подхода для достижения этой цели, который не является хакерским или основанным на jquery? По возможности используйте только Bootstrap и Flexbox. Идея заключается в том, что он ведет себя так (также с компонентами/контентом). Пожалуйста, посмотрите изображение для визуальной справки
}
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> 