css - StoreFrontフッターウィジェットを並べて表示

Question

最近、Wordpress 内で Woocommerce をダウンロードしました。StoreFront テーマを使用して、e コマース サイトを組み立てる方法を学んでいます。製品/カテゴリなどを追加することができました。フッター内にウィジェットを表示して、著作権バーのすぐ上に並べて表示しようとしています。

現在、4 つのウィジェットを追加しましたが、それらはすべて重なり合って表示されます。これらを列内に配置する方法がわかりません。

どうすればそれを行うことができますか？

私が作成しようとしているフッター バーの例を以下に示します: http://flatsome.uxthemes.com/

現在、Wordpress、StoreFront、Woocommerce の最新バージョンを使用しています。

返信と更新をありがとう。

ビューソースから持っているもののコードを追加しました（WordPressバックエンドから何をコピーすればよいかわかりません）

<div class="sfb-footer-bar">
<div class="col-full">
<section id="text-2" class="widget-1 widget-first widget-odd widget 
widget_text"><h2 class="widget-title">Get In Touch</h2>         
<div class="textwidget">My Domain Ltd<br/>
            01234 56789<br/>
            info@mydomain.com<br/>
            Email Us Today and we will respond within 24 hours!<br/>
            </div>
                    </section><section id="text-4" class="widget-2 widget-even widget widget_text"><h2 class="widget-title">Latest Posts</h2>           <div class="textwidget">Testing Area 2</br>
            Testing Area 2</br>
            Testing Area 2</br>
            Testing Area 2</div>
                    </section><section id="text-5" class="widget-3 widget-last widget-odd widget widget_text"><h2 class="widget-title">WHERE CAN I SEE YOU</h2>         <div class="textwidget">JFKLSDJKFJDSJL</div>
                    </section></div></div>
                <footer id="colophon" class="site-footer" role="contentinfo">
                    <div class="col-full">

                            <div class="site-info">
                    &copy; My Domain 2015   </div><!-- .site-info -->

                    </div><!-- .col-full -->
                </footer><!-- #colophon -->