可以订购复杂的CSS网格系统的商品吗？

Question

我正在玩CSS网格。

我想创建一个网格CSS结构，可以在其中轻松更改任何项目的视觉位置。我该怎么做？

为了更好地解释我的问题，我创建了一个css网格系统，该系统具有4列23行，如您在代码段中所见。我给具有order适当性的任何物品都指定订单号。

问题：例如，如何将项目“社交公司”（order: 8;）更改为项目“自动描述”（order: 10;）？

我认为只有在谈论相同尺寸的商品时才有可能，对吗？

借助@media (max-width: 479px)，我可以使用display: flex轻松更改商品的视觉顺序。

.container {
  margin: 0 auto;
  width: 90%;
  height: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(23, auto);
  grid-gap: 5px;
  font-family: 'Karla', sans-serif;
}

.logo {
  grid-area: 1 / 1 / 2 / 4;
  background-color: #E0E3E3;
  order: 0;
}

.social {
  grid-area: 1 / 4 / 2 / 5;
  background-color: #E0E3E3;
  order: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.menu {
  grid-area: 2 / 1 / 3 / 5;
  background-color: #E0E3E3;
  order: 2;
}

.breadcumbs {
  grid-area: 3 / 1 / 4 / 4;
  background-color: #E0E3E3;
  order: 3;
}

.next {
  grid-area: 3 / 4 / 4 / 5;
  background-color: #E0E3E3;
  order: 4;
}

.ads-1 {
  grid-area: 4 / 1 / 5 / 5;
  background-color: #FF6666;
  order: 5;
}

.foto-company {
  grid-area: 5 / 1 / 6 / 2;
  background-color: #E0E3E3;
  order: 6;
  background-position: center bottom;
  background-size: cover;
  height: 130px;
}

.contact-company {
  grid-area: 5 / 2 / 6 / 5;
  background-color: #E0E3E3;
  order: 7;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 5px;
}

.direction-company {
  grid-area: 1 / 1 / 2 / 2;
  order: 1;
}

.address-company {
  grid-area: 2 / 1 / 3 / 2;
  order: 2;
}

.telephone-company {
  grid-area: 3 / 1 / 4 / 2;
  order: 3;
}

.budget-button {
  grid-area: 4 / 1 / 5 / 2;
  order: 4;
}

.mini-ads {
  grid-area: 1 / 2 / 5 / 3;
  background-color: #FF6666;
  order: 5;
}

.social-company {
  grid-area: 6 / 1 / 7 / 5;
  background-color: #E0E3E3;
  order: 8;
}

.ads-2 {
  grid-area: 7 / 1 / 8 / 5;
  background-color: #FF6666;
  order: 9;
}

.auto-description {
  grid-area: 8 / 1 / 9 / 5;
  background-color: #E0E3E3;
  order: 10;
}

.stars {
  grid-area: 9 / 1 / 10 / 4;
  background-color: #E0E3E3;
  order: 11;
}

.ads-3 {
  grid-area: 10 / 1 / 11 / 4;
  background-color: #FF6666;
  order: 12;
}

.description-company {
  grid-area: 11 / 1 / 12 / 4;
  background-color: #E0E3E3;
  order: 13;
}

.ads-4 {
  grid-area: 12 / 1 / 13 / 4;
  background-color: #FF6666;
  order: 14;
}

.hours {
  grid-area: 13 / 1 / 14 / 4;
  background-color: #E0E3E3;
  order: 15;
}

.ads-5 {
  grid-area: 14 / 1 / 15 / 4;
  background-color: #FF6666;
  order: 16;
}

.map {
  grid-area: 15 / 1 / 16 / 4;
  background-color: #E0E3E3;
  order: 17;
}

.if-budget {
  grid-area: 16 / 1 / 17 / 4;
  background-color: #E0E3E3;
  order: 18;
}

.tags {
  grid-area: 17 / 1 / 18 / 4;
  background-color: #E0E3E3;
  order: 19;
}

.ads-6 {
  grid-area: 9 / 4 / 18 / 5;
  background-color: #FF6666;
  order: 20;
}

.ads-7 {
  grid-area: 18 / 1 / 19 / 5;
  background-color: #FF6666;
  order: 21;
}

.more-companies-description {
  grid-area: 19 / 1 / 20 / 5;
  background-color: #E0E3E3;
  order: 22;
}

.more-companies-1 {
  grid-area: 20 / 1 / 21 / 2;
  background-color: #E0E3E3;
  order: 23;
}

.more-companies-2 {
  grid-area: 20 / 2 / 21 / 3;
  background-color: #E0E3E3;
  order: 24;
}

.more-companies-3 {
  grid-area: 20 / 3 / 21 / 4;
  background-color: #E0E3E3;
  order: 25;
}

.more-companies-4 {
  grid-area: 20 / 4 / 21 / 5;
  background-color: #E0E3E3;
  order: 26;
}

.google-search {
  grid-area: 21 / 1 / 22 / 5;
  background-color: #E0E3E3;
  order: 27;
}

.ads-8 {
  grid-area: 22 / 1 / 23 / 5;
  background-color: #FF6666;
  order: 28;
}

.footer-1 {
  grid-area: 23 / 1 / 24 / 4;
  background-color: #E0E3E3;
  order: 29;
}

.footer-2 {
  grid-area: 23 / 4 / 24 / 5;
  background-color: #E0E3E3;
  order: 30;
}

@media (max-width: 479px) {
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .mini-ads {
    grid-area: 1 / 2 / 5 / 3;
    display: none;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="logo"> Logo</div>
  <div class="social"> Social </div>
  <div class="menu"> Menu </div>
  <div class="breadcumbs"> Breadcumbs </div>
  <div class="next"> Next </div>
  <div class="ads-1"> Ads 1 </div>
  <div class="foto-company"> Foto company </div>
  <div class="contact-company">
    <div class="direction-company">Company Name</div>
    <div class="address-company">Address</div>
    <div class="telephone-company">Telephone + Email + Web</div>
    <div class="budget-button">Budget button</div>
    <div class="mini-ads">Mini ads</div>
  </div>
  <div class="social-company"> Social company </div>
  <div class="ads-2"> Ads 2 </div>
  <div class="auto-description"> Auto description </div>
  <div class="stars"> Stars </div>
  <div class="ads-3"> Ads 3 </div>
  <div class="description-company"> Lorem ipsum dolor sit amet, omnis illum aeterno pri id, usu habemus urbanitas ad. Pri veri aperiri delicata te. Cu ponderum partiendo adolescens eum, volutpat facilisis qualisque te eum. At cum sonet affert soleat. Duo utinam blandit no, cum oblique
    prompta probatus ea. Porro everti ponderum pri ea, at mei erat delenit. Est cu hinc case nostrud, te errem persecuti usu, quo eu reque option fabellas. Id mea errem salutandi urbanitas, impetus tractatos ex qui, ubique possit laoreet te eum. Nobis
    omnes tempor has ex. Ad qui disputando adversarium, pri altera dissentiunt ea. Vero utamur nam te, cu vel nobis necessitatibus.</div>
  <div class="ads-4"> Ads 4 </div>
  <div class="hours"> Hours </div>
  <div class="ads-5"> Ads 5 </div>
  <div class="map"> Map </div>
  <div class="if-budget"> If Budget </div>
  <div class="tags"> Tags </div>
  <div class="ads-6"> Ads 6 </div>
  <div class="ads-7"> Ads 7 </div>
  <div class="more-companies-description"> More companies description </div>
  <div class="more-companies-1"> More companies 1 </div>
  <div class="more-companies-2"> More companies 2 </div>
  <div class="more-companies-3"> More companies 3 </div>
  <div class="more-companies-4"> More companies 4 </div>
  <div class="google-search"> Google search </div>
  <div class="ads-8"> Ads 8 </div>
  <div class="footer-1"> Footer 1 </div>
  <div class="footer-2"> Footer 2 </div>
</div>