在移动视图中需要更改<div>的顺序

Question

当我将屏幕大小更改为手机视图时，<div>的页面似乎是按不同的顺序叠加的。有什么方法可以让div将特定的顺序与媒体查询进行叠加，我已经尝试到处搜索，无法找到一种简单的方法。我使用折叠式网格只是为了提高它们的响应性。

全屏上的顺序是：1.)图像在左边，文本在右边2)文本在左边，图像在右边

当转到移动视图时，我希望它从上到下按顺序排列为：

1.图像

(1)案文

2.图像

(2)案文

目前，他们订购的是：

1.图像

(1)案文

(2)案文

2.图像

html:

<!-- First section -->
    <div class="row">
        <div class="grid-2">
            <img src="images/EnrolYourself2Small.png">
        </div>
        <div class="grid-4">
             <h1 class="left-align fontAmaticH1">Text............</h1>
             <p class="left-align fontPlayfair">More text...........</p>
        </div>
    </div>
    <br>
<!-- Second section -->
    <div class="row">
        <div class="grid-4">
            <h1 class="left-align fontAmaticH1">2nd text.........</h1>
            <p class="left-align fontPlayfair">more of 2nd div text........</p>
        </div>
        <div class="grid-2">
            <img src="images/MonitorProgressSmall.png">
        </div>
    </div>

Answer 1

您应该看看CSS媒体查询。

此链接可能为您提供所需内容的基础。

为了对内容进行排序，可以选择CSS网格：

exmaples的链接

并根据显示内容的设备在每个查询上使用网格模板。

示例：

​

.main{
  display:grid;
  grid-template:
    'imagespace1'
    'textspace1'
    'imagespace2'
    'textspace2'
}

.image1{
  grid-area: imagespace1
}

.image2{
  grid-area:imagespace2
}

.text1{
  grid-area:textspace1
}

.text2{
  grid-area:textspace2
}

@media only screen and (max-width: 500px) {
  /* For mobile phones: */
  [class*="main"] {
    grid-template:
    'imagespace1'
    'imagespace2'
    'textspace1'
    'textspace2'
  }
}

<div class='main'>
  <div class='image1'>image1</div>
  <div class='image2'>image2</div>
  <div class='text1'>text1</div>
  <div class='text2'>text2</div>
</div>

​