blog.jsx

<Media query="(max-width: 550px)">
  {matches => 
    matches ? (
      <CardCarousel>
        {blogs.map((blog, index) => {
          return (
            <Link
              key={index}
              to={blog.node.fields.path}
            >
              <BlogCard
                key={index}
                imageFluid={blog.node.coverPhoto.fluid}
                tags={blog.node.tags}
                excerpt={blog.node.article.childMarkdownRemark.excerpt}
                title={blog.node.title}
              />
            </Link>
          )
        })}
      </CardCarousel>
    ) : (
      <Row>
          {blogs.map((blog, index) => {
            return (
              <Col
                key={index}
                md={4}
              >
                <Link
                  to={blog.node.fields.path}
                >
                  <BlogCard
                    key={index}
                    imageFluid={blog.node.coverPhoto.fluid}
                    tags={blog.node.tags}
                    excerpt={blog.node.article.childMarkdownRemark.excerpt}
                    title={blog.node.title}
                  />
                </Link>
              </Col>
            )
          })}
      </Row>
    )
  }
</Media>