I'm trying to alter the CSS of an email footer so that, on mobile, the text wraps down under the image to another row. Right now the text is all being squished to the side on Android 4.4 and Android 6.0.
Here's what the CSS looks like. Help!


<style>                     
/* Constrain email width for small screens */
@media screen and (max-width: 600px) {
    table[class="container"] {
        width: 100% !important;
    }
}

/* Give content more room on mobile */
@media screen and (max-width: 480px) {
    td[class="container-padding"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Styles for forcing columns to rows */
@media only screen and (max-width : 600px) {
    /* force container columns to (horizontal) blocks */
    td[class="force-col"] {
        display: block;
        padding-right: 0 !important;
    }
    table[class="col-2"] {
        /* unset table align="left/right" */
        float: none !important;
        width: 50% !important;
        display:flex;
}

        /* change left/right padding and margins to top/bottom ones */
        margin-bottom: 12px;
        padding-bottom: 12px;
        padding-top: 12px;
        border-bottom: 3px solid #C0C0C0;
    }

    /* remove bottom border for last column/row */
    table[id="last-col-2"] {
        border-bottom: none !important;
        margin-bottom: 0;
    }

    /* align images right and shrink them a bit */
    img[class="col-2-img"] {
        float: right;
        margin-left: 6px;
        max-width: 130px;
    }
   .verticalLine {
  border-left: thick solid #ff0000;
}
 @media only screen and (max-width: 480px){
   .hide {display:none !important;}
}
</style>