Making footer widgets responsive

Question

I have 4 footer widgets in the theme I'm working on. It works great. The only thing that I can't get to work is the responsiveness of the widgets. The 4 footer widgets keep on showing up next to each other on smaller screens, and I need them to be on top of each other for smaller screens. Can any one help me around this problem. Here is my code :

<div id="footerwidget" <?php pietergoosen_voet_widgets_klas(); ?>>
<?php if ( is_active_sidebar( 'sidebar-15' ) ) : ?>
<div id="first" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-15' ); ?>
</div><!-- #Eerste .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-16' ) ) : ?>
<div id="second" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-16' ); ?>
</div><!-- #Tweede .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-17' ) ) : ?>
<div id="third" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-17' ); ?>
</div><!-- #Derde .widget-area -->
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-18' ) ) : ?>
<div id="forth" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-18' ); ?>
</div><!-- #Vierde .widget-area -->
<?php endif; ?>