修改不同屏幕的HTML结构的最佳方法（可能使用媒体查询）

Question

我正在使用React和Reactstrap构建一个简单的页面。它以不对称的方式呈现，因此对于屏幕上的三行，方案是1）Img - 文本2）文本 - img 3）Img - 文本。 问题是当屏幕缩小时，因为文本包裹在图像下面，导致第一行和第二行之间的双文本视图很难看到。怎么解决？ 在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中的列顺序，而是更改每隔一行的flex方向。

使用bootstrap 4，您可以在每个其他flex-row-reverse上使用辅助类<div class="row flex-row-reverse">...</div>。

我不熟悉JSX，所以不是100％实际添加类，但生成的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>