Surrounding Layout Flexbox

by Vanss472

HTML

<!-- slide 1 -->
<div class="table">
    <div class="table-cell">
        <div class="nested-table">
            <div class="nested-item-cell top">
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDW5_XW4_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
            <div class="nested-item-cell bottom">
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDU4_BRV_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
        </div>
    </div>
    <div class="table-cell table-50 middle">
        <img src="//images.thenorthface.com/is/image/TheNorthFaceBrand/Training-hero-m-JUL15?$SCALE-ORIGINAL$" class="img" alt="">
    </div>
    <div class="table-cell">
        <div class="nested-table">
            <div class="nested-item-cell top">
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDT1_CXF_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
            <div class="nested-item-cell bottom">
               <!--  bottom 2 -->
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDU5_16E_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
        </div>
    </div>
</div>
        
<!-- slide 2 -->
<div class="table">
    <div class="table-cell">
        <div class="nested-table">
            <div class="nested-item-cell top">
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDW5_XW4_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
            <div class="nested-item-cell bottom">
                <img src="//images.thenorthface.com/is/image/TheNorthFace/CDU4_BRV_hero?$CATEGORY-LANDING-PRODUCT-REC$" alt="">
            </div>
        </div>
    </div>
    <div class="table-cell table-50 middle">
        <img src="//images.thenorthface.com/is/image/TheNorthFaceBrand/MALookBook-NewWomensLook_768x1024?$SCALE-ORIGINAL$" class="img" alt="">
    </div>
    <div class="table-cell">
        <div...

SCSS

.img {
    max-width: 100%;
    height: auto;
    margin: auto;  
}

.table-50 {
    width: 50%;
}

.table {
    display: table; 
    width: 100%;
    border: 1px solid red;
}

.table-cell {
    display: table-cell;
    vertical-align: top;
    
    &.middle {
         vertical-align: middle;
    }
}

.nested-table {
    display: table;
    width: 100%;
    border: 1px solid green;
}

.nested-item-cell {
    display: table-row;
    height: 30vh;
    
    &.top {
        vertical-align: top;
    }
    
     &.bottom {
        vertical-align: bottom;
    }
}

@media only screen and (max-width: 640px)  {
    .table-cell {
        display: block;
        
        &.middle {
            margin: 0 auto;
        }
    }
    .nested-item-cell {
        display: table-cell;
    }
}