使用 CSS 网格在移动设备上重新定位 div

Question

我有一个网格布局，它是几个带有伴随图像的副本块 (link to jsfiddle)。

<div class="story-body">

    <div class="body-copy">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>


    <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar, elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
    </div>

    <div class="regular-photo">
         <img src="http://placehold.it/500x500">
    </div>

</div>

它在桌面上显示完美——图像紧挨着伴随的复制块的顶部排列。问题是，在移动设备上，图片显示在正文部分之后，这是有道理的，考虑到我是这样组织的 HTML。

.story-body {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row;
}

.body-copy {
    justify-self: center;
    max-width: 80%;
}

.regular-photo {
justify-self: left;
}

@media screen and (max-width: 500px) {
    .story-body {
    grid-template-columns: 100%;
    }
    .regular-photo {
    justify-self: center;
    }
}

有没有办法在移动设备上将 .regular-photo div 放在 .body-copy div 之前，而无需重新组织 HTML？

Answer 1

您可以显式声明 grid-template-areas 并相应地放置每个 div。

fiddle

.story-body {
      display: grid;
      grid-template-columns: 50% 50%;
      grid-auto-flow: row;
    }
    
    .body-copy {
      justify-self: center;
      max-width: 80%;
    }
    
    .regular-photo {
      justify-self: left;
    }
    
    @media screen and (max-width: 500px) {
      .story-body {
        grid-template-columns: 100%;
        grid-template-areas: "image" 
                             "text"
                             "image2"
                             "text2";
      }
      
      .regular-photo {
        justify-self: center;
      }
      
      .story-body > div:nth-of-type(1) {
        grid-area: text;
      }
      .story-body > div:nth-of-type(2) {
        grid-area: image;
      }
      .story-body > div:nth-of-type(3) {
        grid-area: text2;
      }
      .story-body > div:nth-of-type(4) {
        grid-area: image2;
      }
    }

<div class="story-body">
  <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
      elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  </div>
  <div class="regular-photo">
    <img src="http://placehold.it/500x500">
  </div>

  <div class="body-copy">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
      elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  </div>
  <div class="regular-photo">
    <img src="http://placehold.it/500x500">
  </div>
</div>

Answer 2

我对您的代码进行了一些重构。打扰一下。但这是解决方案。您可以将 order property 与包含 display: grid

的 class 的子项一起使用

.story-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  justify-self: center;
}

.story-body p {
  justify-self: center;
  max-width: 80%;
}

.regular-photo {
  justify-self: left;
  display: inline-block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 500px) {
  .story-body {
    grid-template-columns: 1fr;
  }
  .photo1 {
    order: 1;
  }
  .p1 {
    order: 2;
  }
  .photo2 {
    order: 3;
  }
  .p2 {
    order: 4;
  }
}

<div class="story-body">
  <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
    elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  <div class="regular-photo photo1">
    <img src="http://placehold.it/500x500">
  </div>

  <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus iaculis felis, molestie tincidunt est hendrerit vel. Aenean mattis convallis malesuada. Donec nec risus sem. Mauris mi urna, dictum in pulvinar vehicula, rutrum in elit. Sed pulvinar,
    elit sit amet sollicitudin imperdiet, mauris velit sollicitudin velit, nec lacinia dui massa vitae tellus. </p>
  <div class="regular-photo photo2">
    <img src="http://placehold.it/500x500">
  </div>
</div>

使用 CSS 网格在移动设备上重新定位 div

Re-position div on mobile with CSS Grid

html

css

css-grid