css - CSS を使用した div の並べ替え

Question

以下を達成する方法に関する例やチュートリアルを知っている人はいますか:

デスクトップでは、レイアウトは次のようになります。

モバイルでは、レイアウトが次のように変更されます。

ご覧のとおり、モバイルでボックス 2 とボックス 3 を並べ替えて位置を入れ替えたい

ヒントやアドバイスはありますか？

Answer 1

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>

コードペンデモ

Answer 2

これを実現するには、マークアップの順序を変更することをお勧めします。

例：

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

Answer 3

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