有没有一种方法可以使用CSS和HTML在桌面上并排显示列，并在移动设备上显示一个在另一个下面的列？

Question

我是 HTML 和 CSS 新手，我正在尝试格式化代码结果，以便页面具有响应能力，并且它在移动设备上看起来是一种方式，在桌面上看起来是另一种方式，以获得更好的可读性。我已经查看了 W3.School 教程，并且侧面有一个导航栏，而正文分为用 Flex 设置的两列。我想让它在屏幕较小时使两列显示在彼此下方。

这里是 codepen 的链接，可以查看我到目前为止所做的事情：codepen

header {
  background-color: mediumpurple;
  padding: 30px;
  text-align: center;
}

h1 {
  color: #000000;
  text-align: center;
  font-family: times new roman;
  font-size: 30px;
}

h2 {
  color: #000000;
  text-align: center;
  font-family: times new roman;
}

p {
  font-family: times new roman;
  font-size: 18px;
  color
}

p.ex1 {
  font-family: times new roman;
  font-size: 18px;
  margin-bottom: 60px;
}

p.ex2 {
  font-family: times new roman;
  font-size: 18px;
  text-align: center;
}

p.ex3 {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}

p.indented-paragraph {
  font-family: times new roman;
  font-size: 18px;
  text-indent: 20px;
  margin-bottom: -15px;
  margin-left: 20%;
}

img {
  max-width: 100%;
  height: auto;
}

div.container {
  overflow: hidden;
}

div.left {
  float: left;
}

div.right {
  float: right;
}

div.columns {
  display: flex;
  margin-bottom: 100px;
}

div.columns > div {
  width: 50%;
}

section {
  display: -webkit-flex;
  display: flex;
}

a:link {
  color: darkslateblue;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: mediumorchid;
  background-color: transparent;
  text-decoration: underline;
}

nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: lavender;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: snow;
  padding: 10px;
}

@media only screen and (max-width: 620px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  /* For mobile phones: */
  .container .div.columns .section .nav .article .ul {
    width: 100%;
  }

如果有人设法弄清楚如何使列布局响应式，我将非常感激，因为我只能根据屏幕尺寸使导航栏移动。

我对帖子的格式感到抱歉，但我不知道如何让它工作啊哈哈

我尝试使用响应式网页设计框架 W3.CSS，如 https://www.w3schools.com/html/html_responsive.asp 所示，但它不起作用。不过，我在应用代码时可能犯了一个错误。

Answer 1

@media only screen and (max-width: 620px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  /* For mobile phones: */
  .container .div.columns .section .nav .article .ul {
    width: 100%;
  }
}

就像您为您的

flex-direction

更改

section

一样，您也需要为您的

flex-direction

更改

.column

。

  section, .column {
    -webkit-flex-direction: column;
    flex-direction: column;
  }

您还需要取消

.column > div

元素上的填充，但我将让您弄清楚如何做到这一点。