JSFiddle - React, Tailwind, and code Playground

by Anisuzzaman Khan

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css">
<h1>Grid A</h1>

<div class="ui-grid-a ui-responsive">
    <div class="ui-block-a">
        <div class="ui-body ui-body-d">Block A</div>
    </div>
    <div class="ui-block-b">
        <div class="ui-body ui-body-d">Block B</div>
    </div>
</div>

<h1>Grid B</h1>

<div class="ui-grid-b ui-responsive">
    <div class="ui-block-a">
        <div class="ui-body ui-body-d">Block A</div>
    </div>
    <div class="ui-block-b">
        <div class="ui-body ui-body-d">Block B</div>
    </div>
    <div class="ui-block-c">
        <div class="ui-body ui-body-d">Block C</div>
    </div>
</div>

CSS

@media screen and (min-width: 500px) and (max-width: 900px) {
    .ui-grid-b.ui-responsive .ui-block-c {
        width: 100%;
    }
    .ui-grid-b.ui-responsive .ui-block-a,
    .ui-grid-b.ui-responsive .ui-block-b {
        width: 50%;
    }
}