Div 重新订购 CSS

Question

是否有人知道有关如何实现以下目标的任何示例或教程：

在桌面上，布局将是：

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

如您所见，我希望盒子 2 和盒子 3 在移动设备上重新排序和交换位置

有人有什么提示或建议吗？

Answer 1

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

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

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

Answer 4

根据您需要支持的浏览器，您可以使用 flex-box。使用屏幕尺寸的媒体查询，您可以设置第二个和第三个框的 order 以在特定屏幕宽度以下切换。

我写了一篇 pen with a short example. I'd also recommend the 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>

如果我在 .container 上设置 display:flex，我就可以设置内容是否应该显示在行或列中，应该换行，中间或周围有 space元素等。我已经将主要规则设置为使用 flex-flow 的换行（这是其他两个 flex 属性的 shorthand，包括我稍后需要的 flex-direction），space元素之间。

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

Div re-order with CSS

css

responsive-design

responsiveness