使用 React-Bootstrap 的网格布局在 Columns 中重新定位 div

Question

我正在使用 React-Bootstrap 的 Grid 布局功能，并且在根据屏幕宽度/ div 最适合的方式来移动 div 方面遇到了很大的困难。

这里是这个的 React-Bootstrap 代码...

<Row>
    <Col>
        <img src={rocketslogo.url}/>
    </Col>
    <Col xs={8}>
        <div>
            {teamSelect}
        </div>
        <div>
            {yearsSelect}
        </div>
        <div>
            {teamStatsAndInfo}
        </div>
    </Col>
    <Col xs={12}>
        {teamStatsAndInfo}
    </Col>
</Row>

我目前正在显示teamStatsAndInfo 两次以显示我想要的效果，即 - 当宽度更宽时，我希望将teamStatsAndInfo div 放置在下面选择。但是，当宽度更窄时，我希望将 teamStatsAndInfo div 放置在徽标和选择下方。

...因为球队的标志变小而选择保持相同的大小，将球队的统计数据和信息作为自己的列移动到标志和选择下方是有意义的，但是我不知道如何有条件地这样做。

我是移动优先构建事物的新手，并且正在努力构建响应式布局。我不确定我是否违反了许多最佳实践规则（使用相同大小的选择缩小徽标，如何在 Cols 中使用等）。对此的任何想法或帮助将不胜感激，谢谢！

Answer 1

-- 从移动友好型网站开始的第一步是为所有不同的屏幕尺寸设计一个线框。

-- 在您的代码中，您为数据列分配了Col xs={8}。您还需要设置其他屏幕尺寸的宽度。 eg：md - 中屏（≥992px），sm- 小屏（≥768px）等。另外你可以使用xsHidden在小屏中隐藏一些字段（在超小设备中隐藏列）

有关列大小的更多详细信息，请参阅文档，

https://react-bootstrap.github.io/layout/grid/

谢谢，希望对您有所帮助。