Поменять карусельные колонны?

Question

У меня есть загрузочная карусель с 3 колонками, но я хочу, чтобы она была 2 колонки для среднего экрана и 1 колонка для маленького экрана.Как мне этого добиться?

Когда я настраиваю его на средний экран, я хочу, чтобы item3 перешел к следующему элементу карусели.изображения слайдера карусели: карусель item1 image карусель item2 image Это реагирующий загрузочный код.

<Carousel datainterval="false">
            <Carousel.Item>
                <Row style={{ width: "80%", margin: "auto" }}>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img3.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item1</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img1.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item2</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img2.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item3</h3>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Carousel.Item>
            <Carousel.Item>
                <Row style={{ width: "80%", margin: "auto" }}>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img4.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item4</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img5.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item5</h3>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm={4}>
                        <Row>
                            <Col xs={6}>
                              <img src="../images/img6.jpeg" width="100%" />
                            </Col>
                            <Col xs={6}>
                                <h3>item6</h3>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Carousel.Item>
        </Carousel>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

Определите md для среднего экрана, измените его запрос и установите md = {6} и sm = {12}.Таким образом, вы настроили для среднего экрана 2 столбца и для экрана столбец

Пример

Answer 2

Вы можете попробовать загрузочное свойство отображения для столбцов, которые вы хотите скрыть.Пример:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

https://getbootstrap.com/docs/4.0/utilities/display/