Div повторный заказ с CSS

кто-нибудь знает о каких-либо примерах или учебниках о том, как достичь следующего:

на рабочем столе макет будет: Desktop layout

на мобильном телефоне макет изменится на: Mobile Layout

Как вы можете видеть, я хочу поле 2 и поле 3 для повторного заказа и замены позиций на мобильном

есть ли у кого-нибудь советы или советы?

6
css order responsive-design responsiveness

5 ответов

в зависимости от того, какие браузеры нужно поддерживать, Вы могли бы использовать flex-box. Используя медиа-запрос для размера экрана, вы можете установить order второго и третьего ящиков для переключения ниже определенной ширины экрана.

я перо С коротким примером. Я бы также рекомендовал CSS трюки Полное руководство по Flexbox который говорит о том, как использовать flex гораздо лучше, чем я могу.

EDIT:

базовый принцип заключается в том, чтобы установить родительский элемент (например, контейнер) в 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 on .container, затем я могу установить, должен ли контент отображаться в строке или столбце, должен обертывать строку, иметь пространство между или вокруг элементов и т. д. Я установил основное правило для строки обертывания с помощью flex-flow (что является сокращением для двух других свойств flex, включая flex-direction что мне нужно позже), с пространством между элементами.

.container{
  display:flex;
  flex-flow: row wrap;
  justify-content:space-between;
}

затем я использую медиа-запрос, поэтому, когда браузер уже указанной ширины,flex-direction изменяется от row to 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 . Из пера, связанного с выше, это, похоже, не так здесь, но это что-то, чтобы следить за другими проектами.

5

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>

Codepen Demo

3

для достижения этого я предлагаю изменить порядок разметки.

пример:

<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/

альтернатива вы можете использовать flexbox!

2

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}
header {
	height: 100px;
	padding: 0 15px;
}
#content {
	width: 290px;
	float: left;
	padding: 5px 15px;
}

#middle {
	width: 294px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
	margin: 0px 5px 5px 5px;
}

#sidebar {
	width: 270px;
	padding: 5px 15px;
	float: left;
}
footer {
	clear: both;
	padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	
	#sidebar {
		display: none;
	}

}


#content {
	background: #f8f8f8;
}
#sidebar {
	background: #f0efef;
}
#content, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, #content, #middle, #sidebar {
	border: solid 1px #ccc;
}
<div id="pagewrap">

	
		
	<section id="content">
		<h2>1st Content Area</h2>
		<p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
	</section>
	
	<section id="middle">
		<h2>2nd Content Area</h2>
		<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>
		
	</section>

	<aside id="sidebar">
		<h2>3rd Content Area</h2>
		<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
		
		<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
	</aside>
	


</div>
0

супер-простой ответ без рамок и т. д. Вы меняете первоначальный план, помещая третий div на второе место и заставляя его плавать вправо. Два других дива слева. Оказавшись на мобильном, вы просто меняете поплавок.

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;
    }
}

демо

0