如何更改此代码在移动设备中的顺序？
目前在桌面上 <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 以便我们也可以附加一个工作示例。