如何使我的两列响应？

Question

我在网格的中心显示两列内容，我需要在移动视图中将这两列放在彼此之上，我该怎么做？

.two-pics {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 400px 400px;
  object-fit: cover;
  color: #444;
  margin-top: 100px;
  justify-content: center;
}

.box {
  background-color: white;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}

.a {
  grid-column: 1;
  grid-row: 1 / 12;
}

.b {
  grid-column: 2;
  grid-row: 1 / 12;
}

<div class="two-pics">
  <div class="box a">
    <img src="assets/images/pic1.jpg">
    <br>
    <p>title</p>
    <ul>
      <li></li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
      <li>dfgdfghdfhdfh</li>
    </ul>
  </div>
  <div class="box b">
    <img src="assets/images/pic2.jpg">
    <br>
    <p>ldkjh ldkjfh ldk hjf</p>
  </div>
</div>

Answer 1

使用{{ block.settings.image | img_url: '580x', scale: 2 | img_tag: block.settings.image.alt, 'lazyload transition-in' }} 属性，您可以创建适合容器的auto-fit个网格轨道。

codepen

＆＃13;

＆＃13;

400px

＆＃13;

body {
  background: grey;
}

.two-pics {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, 400px);
  color: #444;
  margin-top: 100px;
  justify-content: center;
}

.box {
  background-color: white;
  color: #000;
  border-radius: 5px;
  font-size: 150%;
}

＆＃13;

＆＃13;

＆＃13;