html - Reactjs - 调整大小时订购div

Question

我正在使用 reactstrap 构建我的网络应用。

所以我有 2 个 Jumbotrons 按以下方式对齐:

<Row>
    <Col md='9' id='bigger-block'>
        <Jumbotron>Block 1</Jumbotron>
    </Col>
    <Col md='3' id='smaller-block'>
        <Jumbotron>Block 2</Jumbotron>
    </Col>
</Row>

因此，bigger-block 覆盖左侧宽度的 70%，smaller-block 覆盖右侧剩余的 30%。

我想实现的是当浏览器的宽度减小时:

• smaller-block 应该位于 bigger-block
之上
• 两个 block 现在都应该具有完整宽度(100% 宽度)。

Answer 1

您应该能够通过向 CSS 添加一些额外的规则来实现这一点。

reactstrap 的网格系统是基于 flexbox 的，因此可以使用 order rule 实现响应式排序。 .我已经使用您问题中更新的标记运行了本地测试，并且能够通过添加以下 CSS 规则响应地重新排序:

CSS:

/* the @media block to only apply if the device width is less than 768px wide. 
This means the following rules will typically only take effect on smaller devices like smartphones. 
You can adjust this px width as per your requirements */

@media (max-width: 768px) { 

    #smaller-block {

        /* the 'order' rule is part of flexbox. 
           We can use it here to cause the 'smaller-block' to be ordered before the 
           'larger-block' when viewed on a smaller device/screen */
        order:-1; 
    }
}

网上有很多介绍媒体查询的有用资源。我发现有用的一些值得注意的是:

• > https://css-tricks.com/css-media-queries/
• > https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• > https://www.techrepublic.com/blog/web-designer/how-to-create-media-queries-in-responsive-web-design/