react排序列表移动视图

Question

我对学习反应和编码还很陌生。目前，我正在与docusaurus一起开发一个文档网站。我已经创建了一个用循环(.map(呈现的内容列表。内容在桌面视图中交替显示(内容、图像、图像、内容(，这是应该的。在移动视图中，我总是想要文本、图像、文本、图像。我认为我必须重新创建移动视图的排序。目前我不知道该怎么做。谢谢你的帮助。

以下是一些屏幕截图：
桌面视图
移动视图-->文本需要高于图片

以下是我迄今为止所做的：

import React from 'react';
import clsx from 'clsx';
import styles from './HomepageFeatures.module.css';

const FeatureDetailList = [
{
title: 'Feature 1',
description: (
<>
<h1>
Awsome title
</h1>
Feature content 1 </>
),
},
{
title: '',
description: (
<img className="profile-photo" src="../../static/img/job_template1.png" />
),
},
{ 
title: '',
description: (
<img className="profile-photo" src="../../static/img/job_template2.png" />
),
},
{
title: 'Feature 2',
description: (
<>
<h1>
Awsome title 2
</h1>
Feature content 2  </>
),
},
];
function ListFeatures({ title, description }) {
return (
<div className={clsx('col col--6')}>
<div className="text--center">
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
export default function DetailFeatures() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureDetailList.map((props, idx) => (
<ListFeatures key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

Answer 1

做得不错，到目前为止您所拥有的是桌面视图，对吧？您只想使用CSS更新移动设备的视图。这意味着让它做出反应。

当viewport max width<600像素或类似的东西。。

检查https://www.w3schools.com/css/css_rwd_mediaqueries.asp