Лучший способ изменить структуру HTML для разных экранов (возможно, с медиа-запросами)

Question

Я создаю простую страницу с помощью React и Reactstrap. Он отображается асимметрично, поэтому для трех строк на экране схема выглядит следующим образом: 1) Img - Text 2) Text - img 3) Img - Text.
Проблема в том, что экран уменьшается, потому что текст оборачивается под изображением, что приводит к двойному отображению текста между первой и второй строкой, что плохо видно. Как это исправить?
В CSS я думаю, что это невозможно, поскольку медиа-запросы не могут изменить структуру HTML, и в этом случае это не просто скрыть элемент, но изменить его расположение.

JSX

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import about1 from '../images/aboutstile1.jpg';
import about2 from '../images/aboutstile2.jpg';
import about3 from '../images/aboutstile3.jpg';
// import about3 from '../images';
// import about4 from '../images';
import './about.css';
import { Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button, CardImgOverlay } from 'reactstrap';

export default class About extends Component {
  render() {
    return (
      <div>
          <div className="main">

          </div>
          <br/>
          <br/>
        <Container className="cont">      
            <Row>      
                <Col className="about_tile">
                    <img className="about_tile_img" src={about2} alt=""/>
                </Col>
                    <Col className="about_text">
                        <h2>Executive Recruitment</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>          
            </Row>
            <br/>
            <Row>
            <Col className="about_text">
                        <h2>Technical Expertise</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>         
            <Col className="about_tile">
                    <img className="about_tile_img" src={about3} alt=""/>
                </Col>  
            </Row>
            <br/>
            <Row>      
            <Col className="about_tile">
                    <img className="about_tile_img" src={about1} alt=""/>
                </Col>
                    <Col className="about_text">
                        <h2>Executive Recruitment</h2>
                        <p>REC Consulting provides a full range of solution
                        to hire the most complex managerial figures a business needs. Thanks to
                        specific enquires on the type of leadership of the candidate we will know beforehand if
                        the profile is going to be the right leader in the team in the company.</p>    
                    </Col>    
            </Row>
            </Container>
            <br/>
            <br/>    
        </div>      
    )   
  }
}

CSS

.main {
    height: 26rem;
    background-image: url('../images/abouts7.jpg');
    background-size: cover;
    background-position: 0 9%;
  }



/* .cont {
    max-width: 100rem;
} */

.about_tile {
    width: 400px;
    height: 320px;
}

.about_tile_img {
    border-style: solid;
    border-width: 1px;
    border-color: turquoise;
    border-radius: 25px;
    position: relative;
    width: 400px;
    height: 320px
}

.about_text {
    display: block;
    justify-content: center;
}

Answer 1

Вместо изменения порядка столбцов в HTML измените направление изгиба для каждой второй строки.

С помощью начальной загрузки 4 вы можете использовать вспомогательный класс flex-row-reverse для всех остальных <div class="row flex-row-reverse">...</div>.

Я не знаком с JSX, поэтому не знаю, как на самом деле добавить класс, но сгенерированный HTML должен выглядеть примерно так:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      image
    </div>
    <div class="col-md-6">
      text
    </div>
  </div>
  <div class="row flex-row-reverse">
    <div class="col-md-6">
      image
    </div>
    <div class="col-md-6">
      text
    </div>
  </div>

</div>