Two Side-by-Side Divs – Adding Responsiveness

I have two side by side divs but can’t seem to figure how to make them responsive.

Looking for the right box to fall under the left box at 600px or lower, maintaining all of the other centering that I’ve done inside the divs.

Each side-by-side div has class .div-seller-resources-left and .div-seller-resources-right, respectively.

I’m using a media screen of 600px already for the height of each text box so I’ll use 600 as the breakpoint for this too.

Have attached photos of what it does in the normal size browser, and what it looks like on a smaller screen. As you can tell, the smaller screen just crunches as best it can to fit all of the content on one page.

/* formats the seller-resources page */
.div-header-seller-resources{
    font-size:30px;
    line-height:32px;
    margin-bottom:10px;
}
.div-detail-seller-resources{
    font-size:20px;
    line-height:22px;
    margin-bottom:45px;
}
/*sets the height of the div so each text box is the same size no matter how much text*/
.seller-resources-height{
    height: 125px;
}
/*main container of two side by side boxes*/
.div-main-container-seller-resources{
    width:100%;
    margin-top:30px;
    text-align: center;
    display: flex;
    justify-content: center;
}
/*div under main container, containing both right and left seller resourcs */
.seller-resources-inner{
    display: flex;
    flex-direction:row;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-left{
    width: 300px;
    display: flex;
    text-align:center;
    margin:0px auto;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-right{
    width: 350px;
    display: flex;
    text-align:center;
    margin:0px auto;
}
/* sets the text box screens taller at smaller screens so they don't overlap */
@media screen and (max-width: 600px) {
   .seller-resources-height{
    height:200px;
    }
}
@media screen and (max-width: 600px) {
   div-seller-resources-left .div-seller-resources-left{
    width:100%;
    }
}
<div class="div-main-container-seller-resources">
    <div class="seller-resources-inner">
    <div class="div-seller-resources-left" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
            <div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
          </div>
            <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/referrals/">Referrals</a></div>
            <div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
        </div>
        <div class="clear"></div>
         <div class="seller-resources-height">
                <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
            <div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
         </div>
        <div class="clear"></div>
    </div>
    <div class="div-seller-resources-right" style="display: inline-block;">
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
            <div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/advanced-product-shipping/">Advanced Shipping &amp; Product Options</a></div>
            <div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
        </div>
        <div class="clear"></div>
        <div class="seller-resources-height">
            <div class="div-header-seller-resources"><a target="_blank" rel="nofollow" href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard &amp; Payment</a></div>
            <div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
        </div>
        <div class="clear"></div>
                </div>  
    </div>
</div>


I would suggest to use the flex-wrap property. In this case you can force the elements into a single column. (See MDN Docs)

Just apply flex-wrap: wrap; to the .seller-resources-inner class (See snippet below).