フッター部分を作りたいです。


<nav class="footerNav l-footer">
  <div class="l-footer__inner">
    <div class="l-table">
      <div class="l-tableRow">
        <div class="l-tableCell footerNav__column">
          <p class="footerNav__title">サイトについて</p>
          <ul class="footerNav__list">
            <li><a href="http://cards.hateblo.jp/entry/hatena-mura-rule/">Privacy Policy</a></li>
            <li><a href="http://cards.hateblo.jp/entry/start-to-write/">免責事項</a></li>
            <li><a href="http://cards.hateblo.jp/entry/my-writing-policy/">文章ポリシー</a></li>
            <li><a href="http://cards.hateblo.jp/archive">記事一覧</a></li>
            <li><a href="http://cards.hateblo.jp/sitemap.xml">RSS受信</a></li>
            <li><a href="https://twitter.com/cardmics">Twitterアカウント</a></li>
          </ul>
        </div><!-- /.l-tableCell -->
        <div class="pcOnly l-tableCell footerNav__column clearfix">
          <div class="l-left">
            <p class="footerNav__title">カード会社</p>
            <ul class="footerNav__list">
              <li>国際ブランド
                <ul>
                  <li><a href="http://www.visa.co.jp/index.shtml">VISA</a></li>
                  <li><a href="http://www.mastercard.co.jp/home/index.html">MasterCard</a></li>
                  <li><a href="http://www.cardmics.com/jcb_card.php" rel="nofollow">JCB</a></li>
                  <li><a href="http://www.cardmics.com/amex_gold.php" rel="nofollow">American Express</a></li>
                  <li><a href="http://www.cardmics.com/diners.php" rel="nofollow">DinersClub</a></li>
                </ul>
              </li>
              <li>主なカード発行会社
                <ul>
                  <li><a href="http://www.cardmics.com/smbc.php" rel="nofollow">三井住友カード</a></li>
                  <li><a href="http://www.cardmics.com/mufg_gold.php" rel="nofollow">三菱UFJニコス</a></li>
                  <li><a href="http://www.cardmics.com/saison.php" rel="nofollow">クレディセゾン</a></li>
                  <li><a href="http://www.cardmics.com/rakuten.php" rel="nofollow">楽天カード</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="l-left">
            <p class="footerNav__title">関連サイト</p>
            <ul class="footerNav__list l-left">
              <li>信用情報機関
                <ul>
                  <li><a href="http://www.jicc.co.jp/">JICC</a></li>
                  <li><a href="http://www.cic.co.jp/">CIC</a></li>
                  <li><a href="http://www.zenginkyo.or.jp/pcic/">全銀協</a></li>
                </ul>
              </li>
              <li>業界団体
                <ul>
                  <li><a href="http://www.jcca-office.gr.jp/">日本クレジットカード協会</a></li>
                  <li><a href="http://www.j-credit.or.jp/">日本クレジット協会</a></li>
                  <li><a href="http://www.j-fsa.or.jp/">日本貸金業協会</a></li>
                  <li><a href="http://www.fsa.go.jp/">金融庁</a></li>
                </ul>
              </li>
                </ul>
          </div>
        </div><!-- /.l-tableCell -->
        <div class="l-tableCell footerNav__column">
          <p class="footerNav__title">役立つ情報</p>
          <ul class="footerNav__list">
            <li><a href="http://cards.hateblo.jp/entry/tonan-hoken-detail/">不正利用は怖い？</a></li>
            <li><a href="http://cards.hateblo.jp/entry/card-6dai-miss/">カードの落とし穴</a></li>
            <li><a href="http://cards.hateblo.jp/entry/creditcard-no-shikumi/">カードの仕組み</a></li>
            <li><a href="http://cards.hateblo.jp/entry/hensai-okane-jcco/">返済で困ったら</a></li>
          </ul>
        </div><!-- /.l-tableCell -->
      </div><!-- /.l-tableRow -->
    </div><!-- /.l-table -->
  </div><!-- /.l-footer__inner -->
</nav>

⬇︎に変化させたいのですが、どうすればよろしいですか？？


<img width="1008" alt="スクリーンショット 2016-10-08 16.47.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/121032/a6796770-c2ef-6b33-a698-19a010994397.png">