Question

我正在使用reactstrap来构建我的Web应用程序。

所以我有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>

因此，大块覆盖了左侧宽度的70％，小块覆盖了右侧剩余的30％。

我想要实现的是减小浏览器的宽度：

小方块应该放在大方块
两个块现在都应具有全宽（宽度为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; 
    }
}

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

React.js-调整大小时排序div

1 个答案: