Edit in JSFiddle

function doBlocks(){
    var divs=document.getElementsByTagName("div");
    for(var i in divs){
        switch(parseInt(i)){
            case 0:   divs[i].className='container';     break;
            case 1:   divs[i].className='block1';     break;
            case 2:   divs[i].className='block2';     break;                
        }
           
    }
}
function cancelBlocks(){
    var divs=document.getElementsByTagName("div");
    for(var i in divs){
         divs[i].className='';   
    }
}

<div class='container'>
    <!-- Блок 1-->
    <div class='block1' style='background: #0f0;'>
        CONTENT 1
    </div>
    <!-- Блок 1-->
    <div class='block2' style='background: #f0f;'>
        CONTENT 2
    </div>
</div>

<input type='button' onclick='cancelBlocks()' value='Отменить'>
    <input type='button' onclick='doBlocks()' value='Применить'>

.container{
    display: table;
    width: 100%;
}
.block1{
    width: 100%;
    display: table-footer-group;
}
.block2{
    width: 100%;    
    display: table-header-group;
}