Adicione o pacote react-responsive@4.1.0 a seu projeto.
Navegue para /app/components/cards/PostSummary.jsx e adicone aos imports import MediaQuery from 'react-responsive';
E procure por
{thumb ? (
<div className="articles__content-block articles__content-block--img">
<Link className="articles__link" to={post_url}>
{thumb}
</Link>
</div>
) : null}
Adicione <MediaQuery query="(max-width: 800px)"> antes e adicione </MediaQuery> no final desse codigo.
Agora procure por
{reblogged_by}
{crossPostedBy}
{summary_header}
e adicione antes desses três elementos:
<MediaQuery query="(min-device-width: 801px)">
{thumb ? (
<div className="articles__content-block articles__content-block--img">
<Link className="articles__link" to={post_url}>
{thumb}
</Link>
</div>
) : null}
</MediaQuery>
Editando CSS
Vá para app/assets/stylesheets/app.scss e adicione:
@media screen and (min-width: 51em){
.articles__content-block.articles__content-block--img{
float: left;
margin-top: 15px;
}
}
caso seja necessario, adicione tambem:
@media screen and (max-width: 50em) {
body {
font-size: 86%;
}
.articles__content-block.articles__content-block--img{
float: none;
margin-top: 0px;
}
}