react sort list mobile view

Question

I am fairly new to learning react and coding. At the moment I am working on a documentation site with docusaurus. I have created a list of content that I am rendering with a loop (.map). The content is displayed alternately (content, image, image, content) in the desktop view, which is how it should be. In the mobile view I always want text, image, text, image. I assume that I have to recreate the sorting for the mobile view. At the moment I have no idea how to do that. Thanks for your help.

Here are some screeshots:
Desktop view
Mobile view --> Text needs to be above picture

Here is what I did so far:

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

Nice work, what you have until now is the desktop view working, right? you want update the view for mobile just using CSS. That means make it responsive.

You could use MediaQueries in your styles file to override your css classes when is viewport max-width < 600px or something like that..

check https://www.w3schools.com/css/css_rwd_mediaqueries.asp