当页面从桌面加载到移动响应布局时更改列的顺序

Question

在下面给定的布局中，当页面宽度低于 600px 时，我想将 Column2 放在 Column1 上面我尝试使用 display: flex; flex-direction: column-reverse;，但它没有颠倒列的顺序，而是颠倒了列的内容顺序。

这是片段。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    /**Uncommenting below will lead to content of column reversed and not the order of column reversed**/
    /*display: flex;
    flex-direction: column-reverse;*/
  }
}
</style>
</head>
<body>

<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row" style="height: 20px; background-color: red;">
</div>
<div class="row" style="height: 20px; background-color: blue;">
</div>
<div class="row">
  <div class="column" style="background-color:#aaa;">
   <div class="cls1">
     <h2>Column 1</h2>
     <p>Some text..</p>
    </div>
    <div class="cls2">
     <h2>Column 1.2</h2>
     <p>Some text..</p>
    </div>
    <div class="cls3">
     <h2>Column 1.3</h2>
     <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

如有任何帮助，我们将不胜感激。

Answer 1

您尝试将 display:flex 添加到该列 - 这使得该列成为 flex container 并且其中的元素成为他的 flex items。这就是为什么要反转列内的内容而不是列本身。您想要控制行内的列。为此，您需要将行设置为 flex container（将 display:flex 应用于行而不是列）。这是适用于您的案例的 CSS：

.row {
  display: flex;  // makes the row a flex container
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column-reverse;
  }
}

.column {
  flex-grow: 1;  // makes all columns fill the width of the row equally
  padding: 0 10px;
}

Answer 2

这是基于@ajobi 的已接受答案的工作示例的正确实现：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.row {
  display: flex;  // makes the row a flex container
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column-reverse;
  }
  .column {
    width: 100%;
    /**Uncommenting below will lead to content of column reversed and not the order of column reversed**/
    /*display: flex;
    flex-direction: column-reverse;*/
  }
}
</style>
</head>
<body>

<h2>Responsive Two Column Layout</h2>
<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
<div class="row" style="height: 20px; background-color: red;">
</div>
<div class="row" style="height: 20px; background-color: blue;">
</div>
<div class="row">
  <div class="column" style="background-color:#aaa;">
   <div class="cls1">
     <h2>Column 1</h2>
     <p>Some text..</p>
    </div>
    <div class="cls2">
     <h2>Column 1.2</h2>
     <p>Some text..</p>
    </div>
    <div class="cls3">
     <h2>Column 1.3</h2>
     <p>Some text..</p>
    </div>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

当页面从桌面加载到移动响应布局时更改列的顺序

Changing the order of Columns when page loads from desktop to mobile responsive layout

css

responsive-design