Html 响应式两列css网格

我使用css网格创建了两列，如下所示：

.Background {
  display: grid;
  grid-template-columns: 40% 60%;
}

但由于某些原因，这没有响应，我想更改第一列下面的第二列（图像列）。我怎样才能做到这一点

例如：

Html:

媒体查询 如果在编写css时希望调整网格大小或彼此堆叠，则应设置媒体查询并编写预期规则，以使网格正常运行

例如，您有这个HTML结构

1.
1.
1.

.grid{
显示：网格；
网格模板柱：60%40%；
网格模板行：1fr；
柱间距：20px；
}

例如，如果您希望在屏幕视图小于992px（引导中的md宽度）时将一列堆叠在另一列上，您可以进行媒体查询

.grid{
显示：网格；
网格模板柱：60%40%；
网格模板行：1fr；
柱间距：20px；
}
@媒体屏幕和屏幕（最大宽度：992px）{
.电网{
网格模板柱：重复（2，1fr）；
}
}

---

当视口变小时，您可以设置规则，并保持您的web外观良好。希望本文能有所帮助：

我不确定我是否遵循“出于某种原因，这是不响应的”——我看不出除了使用百分比之外，您还尝试在哪里进行响应布局……更改小提琴预览的大小，如果大小小于两个列的总和，则第二列应该下降。例如，如果你在Iphone X屏幕上预览，第二列在第一列的上方，而不是@AlexanderNiedWhat code你添加了哪些代码让你认为应该发生这种情况？这就是

SCSS

而不是

CSS

，我以为CSS网格会自动完成，但没有。我需要添加什么@亚历山大

<section id="intro" class="SectionGiveAway" />
        <!-- <img src="~@/assets/img/giveAway-header.png" alt="" /> -->
      <section class="Background">
        <div class="SectionGiveAway__container">
          <div class="SectionGiveAway__container-title">sign up</div>
          <div class="SectionGiveAway__container-subtext">
            text
          </div>
          <div class="SectionGiveAway__container-boldtext">
            text
          </div>
          <div class="SectionGiveAway__container-formtext">
            Name:
            <input v-model="name" name="name" autocomplete="name" />
          </div>
          <div class="SectionGiveAway__container-formtext">
            Last name:
            <input 
              v-model="lastName"
              name="lastName"
              autocomplete="lastName"
            />
          </div>
          <div class="SectionGiveAway__container-formtext">
            E-mail:
            <input v-model="email" name="email" autocomplete="email" />
          </div>

          <button
            :disabled="isSubmitting"
            variant="primary"
            type="submit"
            class="SectionGiveAway__container-button"
          >
            SEND
          </button>
        </div>
        <div>
          <img
            class="SectionGiveAway__grill-image"
            src="https://picsum.photos/1500"
          />
        </div>
      </section>

.Background {
  display: grid;
  grid-template-columns: 40% 60%;
}

.SectionGiveAway {
  padding: 5rem 0 4rem;
 
  background-size: cover;
  padding: 4rem 2rem;
  margin-top: 6em;

  display: grid;
  align-items: center;

  &__container {
    padding: 2em;
  }

  &__container-title {
    font-size: 100px;
    color: #a60a2d;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 120px;
  }

  &__container-subtext {
    font-size: 50px;
    line-height: 60px;
  }

  &__container-boldtext {
    font-size: 63px;
    font-weight: bold;
    line-height: 75.6px;
  }

  &__container-formtext {
    font-size: 20px;
    color: #a60a2d;
    line-height: 24px;
    font-weight: bold;
  }

  &__container-button {
    border-radius: 40px;
    margin-top: 30px;
  }

  &__grill-image {
    height: 60%;
  }
}