使用媒体查询更改列顺序

Question

我想做的是使用媒体查询将右栏放在左栏旁边（现在它在中间栏旁边）。右栏也应该有 10px 的左边距（随着屏幕尺寸缩小），就像示例中那样。我添加位置：绝对；右：8px； .right 但它不能按我需要的方式工作。谢谢。

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10px;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 300px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
    margin-right: calc(50% - 450px);
}
.middle {
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 300px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

@media screen and (max-width: 980px) {
  body {
      width: 95%;
  }
   .left {
      width: 60%;
      margin-right: 0;
   }
   .middle {
      width: 60%;
      margin-top: 10px;
     clear: both;
   }
   .right {
      width: calc(40% - 10px);
      margin-top: 10px;

  
      
   }
}

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>My Resume</title>
 </head>
 <body>
 <div id="header">
     <h1>My <span>Resume</span></h1>
 </div>
 <div class="left">
     <h2>Left Column</h2>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
         </ul>
 </div>
  <div class="middle">
     <h2>Сenter Column</h2>
         <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
 </div>
 <div class="right">
     <h4>Right Column</h4>
         <ul>
             <p>Some Text</p>
             <p>Some Text</p>
        </ul>
 </div>
 <div style="clear:both; border:none; border-radius: none;"></div>
 <div id="footer">
     <p>© 2015 Me - the Programmer</p>
 </div>

Answer 1

你可以使用 flexbox 来实现

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10px;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 300px;
    background-color: #C7E6FF;
    margin-top: 64px;
}
.middle {
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
}
.right {
    width: 300px;
    background-color: #C7E6FF;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

.columns{
  display:flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap:wrap;
}

.left{
  order: 1;
}
.middle{
  order: 2;
}
.right{
  order: 3;
}

@media (max-width:980px){
  .middle{
    order: 3;
    margin-top: 10px;
  }
  .right{
    order:2;
  }
}

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title>My Resume</title>
</head>

<body>
  <div id="header">
    <h1>My <span>Resume</span></h1>
  </div>
  <div class="columns">
    <div class="left">
      <h2>Left Column</h2>
      <ul>
        <p>Some Text</p>
        <p>Some Text</p>
      </ul>
    </div>
    <div class="middle">
      <h2>Сenter Column</h2>
      <ul>
        <li>
          <p>Some Text</p>
        </li>
        <li>
          <p>Some Text</p>
        </li>
      </ul>
    </div>
    <div class="right">
      <h4>Right Column</h4>
      <ul>
        <p>Some Text</p>
        <p>Some Text</p>
      </ul>
    </div>
  </div>
  <div style="clear:both; border:none; border-radius: none;"></div>
  <div id="footer">
    <p>© 2015 Me - the Programmer</p>
  </div>

Answer 2

您可以通过对 CSS 和 HTML 进行一些更改来实现此目的：

将.middlediv移到HTML

.right

div

在媒体查询 .right 上将 margin-top: 10px; 更改为 margin-top: 64px;

这是可行的，因为 .middle 设置为 float: left;，这会将它推到其容器的左侧，直到它碰到另一个浮动元素（在本例中为 .left）。 .right 设置为 float: right;，这会将它推到其容器的右侧。

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

浮动 (https://developer.mozilla.org/en-US/docs/Web/CSS/float)

当媒体查询生效时 .middle 设置为 clear: both;，因为它在 HTML 中的 .left 和 .right 之后它将放在一个新行上，清除两个浮动元素。

div {
  border-radius: 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
#header {
  height: 52px;
  width: calc(100% - 16px);
  background-color: #B2D490;
  z-index: 1;
  position: fixed;
  top: 10px;
}
h1 {
  color: #FFFFFF;
  padding-left: 25px;
  margin: 0;
  display: inline;
  font-size: 27px;
  line-height: 50px;
}
h2,
h3,
h4,
h5,
h6 {
  padding-left: 10px;
  margin: 10px 0 10px 0px;
  color: #00457D;
}
.left {
  width: 300px;
  background-color: #C7E6FF;
  float: left;
  margin-top: 64px;
  margin-right: calc(50% - 450px);
}
.middle {
  width: 300px;
  background-color: #DEF0FF;
  margin-top: 64px;
  float: left;
}
.right {
  width: 300px;
  background-color: #C7E6FF;
  float: right;
  margin-top: 64px;
}
#footer {
  height: 35px;
  width: 100%;
  background-color: #57C449;
  clear: both;
  position: relative;
  margin-top: 10px;
}
p {
  color: #00579E;
}
#footer p {
  color: #FFFFFF;
  text-align: center;
  margin: auto;
  line-height: 35px;
}
span {
  color: #D4EBFF;
}
@media screen and (max-width: 980px) {
  body {
    width: 95%;
  }
  .left {
    width: 60%;
    margin-right: 0;
  }
  .middle {
    width: 60%;
    margin-top: 10px;
    clear: both;
  }
  .right {
    width: calc(40% - 10px);
    margin-top: 64px;
  }
}

<head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />
  <title>My Resume</title>
</head>

<body>
  <div id="header">
    <h1>My <span>Resume</span></h1>
  </div>
  <div class="left">
    <h2>Left Column</h2>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="right">
    <h4>Right Column</h4>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="middle">
    <h2>Сenter Column</h2>
    <ul>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
    </ul>
  </div>
  <div style="clear:both; border:none; border-radius: none;"></div>
  <div id="footer">
    <p>© 2015 Me - the Programmer</p>
  </div>

使用媒体查询更改列顺序

Change column order using media query

html

css

media-queries