如何在媒体查询中将两个div放在一个列的顶部？

Question

所以我正在动员我的网站，我希望能够改变我的网页在iPhone上看起来的样子。

我有两个div，一个漂浮在左边，另一个漂浮在右边，因此它们彼此水平相邻。 但是，我试图找出如何更改这两个＆＃34;块＆＃34;这样当他们在手机上看时他们就在彼此之上？这是我的桌面版代码：

<header class="intro-about">
    <div class="container-fluid">
        <div class="left" style="background-color: #282828;">
            <h1 class="text-center">Get to know my work</h1>
        </div>
        <div class="right" style="background-color: #282828;">
            <h1 class="text-center">Get to know me</h1>
        </div>
    </div>
</header>

它看起来像这样：

但是，我试图在手机上看起来像这样：

我也希望在我的CSS中使用媒体查询。

Answer 1

使用display:flex和@media(max-width)：

非常容易

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
body, html {
  height: 100%;
  margin: 0;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  /*Do not forget next line, or items won't wrap*/
  flex-wrap: wrap;
}

.item {
  padding: 1rem;
  flex: 1 0 50%;
}
.left {
  background-color: blue;
}
.right {
  background-color: grey;
}

/*Layout changes on screen width 700px*/
@media(max-width: 700px) {
  .item { 
    flex: 1 0 100%;
  }
}

＆＃13;

<div class="container">
  <div class="item left">Some left content</div>
  <div class="item right">Some right content</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

弄清楚要使它们堆叠的宽度，然后将以下内容添加到CSS max-width:

之后的宽度

@media {max-width: 700px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}