如何使用媒体查询使我的列相互堆叠

Question

我正在努力解决这个问题。任何帮助或建议将不胜感激。我的目标是当屏幕小于 700 像素时，内容将从当前的并排列变为块显示。但目前我的专栏只是并排。我设法让它在 jsfiddle 中工作，但不能让它做任何事情，然后在崇高的文本中缩小在一起。

footer {
  background-color: #333538;
  /* padding: 24px 0; */
  margin-top: 12px;
}
footer p {
  color: white;
  margin-bottom: 12px !important;
}
.social {
  list-style-type: none;
  padding: 0;
}
.social li {
  display: inline;
  margin-right: 12px;
}

.copyright {
  /* padding: 12px 0; */
  text-align: center;
}
.column-half {
  margin: 0 12px 24px 12px;
  width: 400px;
  background-color: blue;
  /*float: left;*/
}
.row-foot {
  display: flex;
  flex-direction: row;
  margin: 72px;

}
.container {
  width: 1200px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .row-foot {
    display: block;
  }
  .container {
    width: auto;
  }
}

<footer>
  <div class="container">
    <div class="row-foot">
      <div class="column-half">
        <h4>BOOK AN APPOINTMENT</h4>
        <p>The Paw Pad is a professioanl dog grooming service based in lytham</p>
        <p>Strit practice to a high hygeine standard ensuring your dog leaves in good health as well as a great coat</p>
        <p>All request are welcome and I'll be happy to help in any way I can</p>
        <p><b>Opening Hours</b></p>
        <p><i>Monday to Friday 10am-5pm</i></p>
      </div> <!-- end column half -->
      <div class="column-half">
        <h4>Get in touch</h4>
        <p>46 aaaaa ddddt</p>
        <p>fy8 gr6</p>
        <p>000000000</p>
        <p><a href="mailto:fdjhgfdhgf@gmail.com">thgfhgfhgs@gmail.com</a></p>
        <li class="social"><a href="#"><img src="C:\Users\Sue\Desktop\sublime-
          text\images/facebook-logo2.png" alt="Facebook"></a></li>
        </div>
      </div>
    </div>
  </footer>

Answer 1

据我所知，您的 CSS 和 HTML 语法都存在问题。

对于 HTML：

第二个“半列”div 内的 li 元素应该在 ul 或 ol 元素内。

做类似的事情

<ul class="social"><li>............type the rest here</li></ul>

对于 CSS：

将 screen 或 all 添加到您的媒体查询声明中，如下所示

@media screen and (max-width: 700px) {}