Кто-нибудь знает какие-либо примеры или учебники о том, как достичь ниже:Div изменить порядок с помощью CSS
На рабочем столе макет будет: 
На мобильный макет изменится: 
Как вы можете видеть, я хочу коробки 2 и 3 коробки, чтобы изменить порядок и позиция свопа на мобильном
кто-нибудь есть какие-либо советы или рекомендации?
В зависимости от того, что браузеры вам необходимо поддерживать можно использовать flex-box. Используя медиа-запрос для размера экрана, вы можете установить order второго и третьего боксов для переключения ниже определенной ширины экрана.
Я сделал pen с кратким примером. Я бы также рекомендовал CSS Tricks Complete Guide to Flexbox, который говорит о том, как использовать flex намного лучше, чем я могу.
РЕДАКТИРОВАТЬ:
Основной принцип должен был бы установить родительский элемент (например, контейнер) для display: flex; это генерирует flexbox и позволяет вам устанавливать разные параметры для детей.
Используя следующий HTML:
<div class="container">
<div class="box first">
Box 1
</div>
<div class="box second">
Box 2
</div>
<div class="box third">
Box 3
</div>
</div>
Если установить display:flex на .container, я могу затем установить, должен ли контент отображаться в строке или столбце, следует завернуть вниз линию, имеют место между или вокруг элементы и т. д. Я установил основное правило как строку обертывания, используя flex-flow (который является сокращением для двух других свойств гибкости, включая flex-direction, которые мне нужны позже), с пространством между элементами.
.container{
display:flex;
flex-flow: row wrap;
justify-content:space-between;
}
я использовать медиа-запрос так, когда браузер является более узким, чем заданной ширины, то flex-direction получает изменяется от row к column
@media screen and (max-width:600px){
.container {
flex-direction:column
}
}
Затем в том же запросе СМИ, мне нужно говорят те элементы, которые я хочу, чтобы изменить порядок в каком порядке они должны быть:
@media screen and (max-width:600px){
.container {
flex-direction:column
}
.second{
order: 3;
}
.third{
order: 2
}
}
Иногда я заметил, что order необходимо определить для всех элементов, поэтому вам может потребоваться установить его для первого блока и сохранить его как order: 1. Из ручки, связанной с выше, это, похоже, не так, но это то, что нужно следить за другими проектами.
Хотя это теоретически может ответить на вопрос, [** было бы предпочтительнее **] (// meta.stackoverflow.com/q/8259), чтобы включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. –
Понял и отредактировал. –
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
color: #666;
}
/* STRUCTURE */
#pagewrap {
\t padding: 5px;
\t width: 960px;
\t margin: 20px auto;
}
header {
\t height: 100px;
\t padding: 0 15px;
}
#content {
\t width: 290px;
\t float: left;
\t padding: 5px 15px;
}
#middle {
\t width: 294px; /* Account for margins + border values */
\t float: left;
\t padding: 5px 15px;
\t margin: 0px 5px 5px 5px;
}
#sidebar {
\t width: 270px;
\t padding: 5px 15px;
\t float: left;
}
footer {
\t clear: both;
\t padding: 0 15px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
\t
\t #pagewrap {
\t \t width: 94%;
\t }
\t #content {
\t \t width: 41%;
\t \t padding: 1% 4%;
\t }
\t #middle {
\t \t width: 41%;
\t \t padding: 1% 4%;
\t \t margin: 0px 0px 5px 5px;
\t \t float: right;
\t }
\t
\t #sidebar {
\t \t clear: both;
\t \t padding: 1% 4%;
\t \t width: auto;
\t \t float: none;
\t }
\t
}
/* for 700px or less */
@media screen and (max-width: 600px) {
\t #content {
\t \t width: auto;
\t \t float: none;
\t }
\t
\t #middle {
\t \t width: auto;
\t \t float: none;
\t \t margin-left: 0px;
\t }
\t
\t #sidebar {
\t \t width: auto;
\t \t float: none;
\t }
}
/* for 480px or less */
@media screen and (max-width: 480px) {
\t
\t #sidebar {
\t \t display: none;
\t }
}
#content {
\t background: #f8f8f8;
}
#sidebar {
\t background: #f0efef;
}
#content, #middle, #sidebar {
\t margin-bottom: 5px;
}
#pagewrap, #content, #middle, #sidebar {
\t border: solid 1px #ccc;
}<div id="pagewrap">
\t
\t \t
\t <section id="content">
\t \t <h2>1st Content Area</h2>
\t \t <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
\t </section>
\t
\t <section id="middle">
\t \t <h2>2nd Content Area</h2>
\t \t <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p>
\t \t
\t </section>
\t <aside id="sidebar">
\t \t <h2>3rd Content Area</h2>
\t \t <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
\t \t
\t \t <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
\t </aside>
\t
</div>Для достижения этой цели я предлагаю, чтобы изменить порядок разметки.
Пример:
<div class="wrap">
<div class="div-1">1</div>
<div class="div-3">3</div>
<div class="div-2">2</div>
</div>
И CSS
.div-1,
.div-2,
.div-3 {
width: 50px;
height: 50px;
float: left;
position: relative;
}
.div-2 {
right: 33%;
}
.div-3 {
left: 33%;
}
@media screen and (max-width: 640px) {
.div-1,
.div-2,
.div-3 {
width: 100%;
left: auto;
right: auto;
}
}
Пример: https://jsfiddle.net/umq3w14p/
Alternative можно использовать flexbox!
flexbox может сделать это очень легко
.wrap {
display: flex;
}
.box {
height: 150px;
border: 1px solid green;
flex: 1;
margin: 25px;
text-align: center;
line-height: 150px;
font-size: 36px;
}
.box:first-child {
order: 1;
}
.box:nth-child(2) {
order: 2;
}
.box:nth-child(3) {
order: 3;
}
@media screen and (max-width: 760px) {
.wrap {
flex-direction: column;
}
.box:nth-child(2) {
order: 3;
}
.box:nth-child(3) {
order: 2;
}
}<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>Супер-простой ответ без фреймворков и т. Д. Вы меняете первоначальную планировку, помещая третий дивизион на второе место и заставляя его плавать вправо. Остальные два divs слева. Когда-то на мобильном телефоне, вы просто меняете поплавок.
HTML
<div id="container">
<div id="one">Div 1</div>
<div id="three">Div 3</div>
<div id="two">Div 2</div>
</div>
CSS
html, body
{
padding:0;
margin:0;
}
#container
{
width:100%;
height:auto;
margin:0 auto;
padding:0;
}
#one, #two ,#three
{
width:32%;
margin:0.6666%;
padding:0;
height:200px;
display:block;
}
#one, #two
{
float:left;
}
#three
{
float:right;
}
#one{
background:green;
}
#two
{
background:blue;
}
#three
{
background:red;
}
@media screen and (max-width: 480px)
{
#one, #two, #three
{
width:100%;
margin:5px 0;
display:block;
}
#two
{
float:left;
}
}
Самый простой способ выполнить эту задачу, чтобы взглянуть на рамках, которые дает инструменты, чтобы сделать это быстро, как самый известный [Сапоги ловушку и его сетчатую систему] (http://getbootstrap.com/css/#grid). –
Я думаю, что каркас работает, если вам это нужно, но для подобных вещей вам действительно не нужна полная структура. –
Возможный дубликат [Использовать CSS для изменения порядка DIV] (http://stackoverflow.com/questions/220273/use-css-to-reorder-divs) –