<div id="flexbox">
    <input type="checkbox" id="hoge1">
    <div>
        <label for="hoge1">
            <p>hoge1</p>
            <p class="hidden">Happy</p>
    </label>
    </div>
    <input type="checkbox" id="hoge2">
    <div>
        <label for="hoge2">
            <p>hoge2</p>
            <p class="hidden">New</p>
        </label>
    </div>
    <input type="checkbox" id="hoge3">
    <div>
        <label for="hoge3">
            <p>hoge3</p>
            <p class="hidden">Year !!</p>
        </label>
    </div>
</div>



*{
    -webkit-transition:all ease .4s;
    transition:all ease .4s;
}
input{
    display: none;
}
label{
  cursor:pointer;
}
#flexbox{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    flex-wrap: wrap;
}
#flexbox div{
    width:30%;
    -webkit-box-ordinal-group:3;
    order:2;
    background-color:khaki;
    text-align: center;
}
#flexbox div:nth-of-type(2) { background-color:pink}
#flexbox div:nth-of-type(3) { background-color:lime}

p.hidden{
    display:none;
  font-size:2em;
  font-weight:bold;
  color:tomato;
}

#hoge1:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge2:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge3:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}

#hoge1:checked + div p.hidden{ display:block;}
#hoge2:checked + div p.hidden{ display:block;}
#hoge3:checked + div p.hidden{ display:block;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.