html - 如何使用此代码更改移动设备中容器的顺序?

如何更改此代码在移动设备中的顺序?

目前在桌面上 <div class="grid4-12">(左)和 <div class="grid8-12">(右)相互堆叠。

如何更改响应式代码,使 <div class="grid8-12"> 位于顶部,而 <div class="grid4-12"> 位于在底部?

下面的代码

<div class="card-content-lg" style=" background: #ffffff;">
  <div class="grid4-12">
    <div class="quote-wrapper test">
      <div class="quote-col1 test">
        <div class="quote-image"><img alt="Image1" src="/images" /></div>
      </div>

      <div class="quote-col2 test2">
        <div class="quote-text">This is only test</div>
      </div>

      <div class="quote-col3">
        <div><img alt="ABC" src="/images" /></div>
      </div>
    </div>
  </div>

  <div class="grid8-12">
    <div class="card-content-md">
      <h2 class="abc">This is h2 text</h2>

      <p>This is a test.</p>

    </div>
  </div>
</div>

回答1

您可以为父类 (.card-content-lg) 提供一个显示 value 的 flex,并将 flex-direction 设置为 column。然后,在 "second" / "right" 元素上,给它一个 "order: -1;" 的 value。然后,在较大的视口上将 flex-direction 的 value 更改为“行”,并将顺序改回 1。

.card-content-lg {
      display: flex;
      flex-direction: column;
    }

    @media all and (min-width: 640px) {
    .card-content-lg {
        display: flex;
        flex-direction: row;
      }
    }

    .grid4-12, .grid8-12 {
      background: gray;
      min-height: 6rem;
      margin: 1rem;
      padding: 1rem;
      color: white;
    }

    .grid8-12 {
      order: -1;
    }

    @media all and (min-width: 640px) {
      .grid8-12 {
        order: 1;
      }
    }
<div class="card-content-lg" style=" background: #ffffff;">
      <div class="grid4-12">
        <div class="quote-wrapper test">
          <div class="quote-col1 test">
            <div class="quote-image"><img alt="Image1" src="/images" /></div>
          </div>

          <div class="quote-col2 test2">
            <div class="quote-text">This is only test</div>
          </div>

          <div class="quote-col3">
            <div><img alt="ABC" src="/images" /></div>
          </div>
        </div>
      </div>

      <div class="grid8-12">
        <div class="card-content-md">
          <h2 class="abc">This is h2 text</h2>

          <p>This is a test.</p>

        </div>
  </div>
</div>

回答2

使 card-content-lg 成为一个 flexbox 并使用媒体查询来反向使用 flex-direction: row-reverse 添加您的代码的 css 以便我们也可以附加一个工作示例。

相似文章