Untitled

<!DOCTYPE html>

<style>
.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    background: transparent;
    box-shadow: none !important;
    transition: all .4s ease-in-out;
}

.column {
    flex: 1 1 0;
    padding: 0px 50px 0px 50px;
}

.columnsmall {
    flex: 2 2 0;
    padding: 0px;
}

.columnlarge {
    flex: 4 4 0;
    padding: 0px 50px 0px 50px;
}

#grafana_header {
    position: relative;
    height: 68px;
}

.overflowhider {
    height: 100%;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    #hiderow {
        display: none;
    }
}
</style>

<div class="flex" id="hiderow">
    <div class="column">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="column">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="column">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
</div>

<div class="flex" id="hiderow" style="padding-bottom: 30px;">
    <div class="columnsmall" style="padding-left: 50px;">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="columnsmall" style="padding-right: 50px;">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="columnlarge">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="columnsmall" style="padding-left: 50px;">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
    <div class="columnsmall" style="padding-right: 50px;">
        <iframe class="iframe" id="grafana_header"
        frameborder="0" src="URL TO GRAFANA IFRAME"></iframe>
    </div>
</div>

<div class="row" id="hiderow" style="height: 20px; border-top: 1px solid rgba(180, 180, 180, 1);">
</div>

<div class="row" id="announcementRow">
    <div class="col-md-12">
        <h3 class="pull-left homepage-element-title">
        <span>section title</span>
        </h3>
        <hr class="hidden-xs">
    </div>
</div>

<div class="col-md-12">
    <h4>date</h4>
    <h5>subject</h5>
    <div class="col-md-12">
        <p>bla bla bla text here bla bla bla</p>
        <br>
    </div>
</div>