为不同屏幕修改 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 中的列顺序，而是每隔一行改变 flex 方向。

对于 bootstrap 4，您可以在每个 <div class="row flex-row-reverse">...</div>.

上使用助手 class flex-row-reverse

我不熟悉 JSX，因此不能 100% 了解您实际添加 class 的方式，但生成的 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>

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

Best way to modify HTML structure for different screens (possibly with media-queries)

html

css

twitter-bootstrap

bootstrap-4

reactstrap