Question

有没有人知道如何实现以下内容的任何示例或教程：

在桌面上，布局将是：

在移动设备上，布局将更改为：

如您所见，我希望方框2和方框3重新订购并在移动设备上交换位置

有人有任何提示或建议吗？

Answer 1

根据您需要支持的浏览器，您可以使用flex-box。使用媒体查询屏幕大小，然后您可以设置第二个和第三个框的order切换到某个屏幕宽度以下。

我用一个简短的例子做了pen。我还建议CSS Tricks Complete Guide to Flexbox讨论如何更好地使用flex。

编辑：

基本原则是将父元素（例如，容器）设置为display: flex;这会生成弹性框，并允许您为子项设置不同的参数。

使用以下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，我可以设置内容是应该显示在行还是列中，是否应该包裹一行，在元素之间或周围留出空格等.I＆＃39;使用flex-flow将主规则设置为包装行（这是其他两个flex属性的简写，包括我后面需要的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。从与上面相关的笔中，似乎并非如此，但在其他项目中需要注意的事项。

Answer 2

flexbox可以轻松地做到这一点

＆＃13;

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

＆＃13;

<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

＆＃13;

Codepen Demo

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

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

没有框架等的超简单答案。你可以通过将第三个div放在第二位并让他向右浮动来改变原来的布局。另外两个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;
    }
}

<强> Demo

Div使用CSS重新排序

5 个答案: