A CodePen by Chris Nager. Make This Responsive - Base for the very first Rodeo

index.html

<div class="page-wrap">

    <h1>Make This Responsive</h1>
    <p>While maintaining the heirarchy of importance.</p>
  
    <article class="story  main-story">
        <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>
        <div class="story-intro">
            <h1>Most Important Story</h1>
            <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
        </div>
    </article>

    <section class="sub-stories">

        <article class="story  sub-story">
            <img src="http://placekitten.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

        <article class="story  sub-story">
            <img src="http://placecage.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

        <article class="story  sub-story  last">
            <img src="http://placebear.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

    </section>

</div>

style.css

/* Base styles
   ------------------------------ */

* {
    box-sizing: border-box; 
}
html {
    font-size: 50%;
}
h1,
h2 {
    margin-top: 0;
    margin-bottom: 0.625rem;
}
h1 {
    font-size: 4em;
}
/*h2 {
    font-size: 2em;
}*/
img {
    max-width: 100%;
    vertical-align: top;
}
a {
    color: lightblue;
}



/* Page wrap
   ------------------------------ */

.page-wrap {
    margin: 1.25em auto 1.5625em;
    overflow: hidden;
}



/* Story base styles
   ------------------------------ */

.story {
    position: relative;
    margin-bottom: 1.5625em;
    background: black;
}
.story-intro {
    position: absolute;
    right: 1.5625rem;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    padding: 1.25em;
    color: white;
}
.story-intro h1 {
    font-size: 2.5em;
}
.story-intro p {
    margin: 0;
}



/* Main story
   ------------------------------ */

.main-story .story-intro {
    right: 0;
}



/* Substories
   ------------------------------ */

.sub-stories {
    overflow: hidden;
}
.sub-story {
    height: 13.75em;
    margin-bottom: 1.5625rem;
    overflow: hidden;
    font-size: 80%;
    background: rgba(0, 0, 0, 0.75);
}
.sub-story > img {
    max-height: 100%;
    padding: 1.25em;
    float: left;
}
.sub-story .story-intro {
    width: 68%;
    position: static;
    float: left;
    background: none;
}
.last {
    margin-bottom: 0;
}

@media only screen and (min-width: 35em) {
    html {
        font-size: 75%;
    }
    .page-wrap {
        max-width: 50em;
    }
    .sub-stories {
        margin-right: -1.5625rem;
    }
    .sub-story {
        width: 33.33333%;
        height: auto;
        margin-bottom: 0;
        padding-right: 1.5625rem;
        float: left;
        background: none;
    }
    .sub-story > img {
        max-height: none;
        padding: 0;
    }
    .sub-story .story-intro {
        width: auto;
        position: absolute;
        right: 1.5625rem;
        background: rgba(0, 0, 0, 0.75);
    }
}
@media only screen and (min-width: 50em) {
    html {
        font-size: 100%;
    }
}